<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MyTechBook</title>
        
    <link rel="stylesheet" type="text/css" href="../../static/css/main.css">
</head>
<body>
<div class="navbar navbar-line">
    <div class="container">
        <div class="logo">
            
                MyTechBook
            
        </div>
        <input type="checkbox" id="idoc_nav" />
        <div class="menu_tree">
        <ul><li><a href="../../index.html">首页</a></li><li><a href="#"><span></span>前沿观察</a><ul><li><a href="../../html/前沿观察/ECMAScript 6入门.html">ECMAScript 6入门</a></li><li><a href="../../html/前沿观察/Immutable详解及React中实践.html">Immutable详解及React中实践</a></li><li><a href="../../html/前沿观察/Node.js MVC框架ThinkJS.html">Node.js MVC框架ThinkJS</a></li><li><a href="../../html/前沿观察/Nodejs 5.0.0版本.html">Nodejs 5.0.0版本</a></li><li><a href="../../html/前沿观察/关系型数据库PostgreSQL.html">关系型数据库PostgreSQL</a></li><li><a href="../../html/前沿观察/轻型MVVM框架Vue.js.html">轻型MVVM框架Vue.js</a></li><li><a href="../../html/前沿观察/基于nodejs的开发框架koa.html">基于nodejs的开发框架koa</a></li></ul></li><li><a href="#"><span></span>前端工程化</a><ul><li><a href="../../html/前端工程化/前端模板.html">前端模板</a></li><li><a href="../../html/前端工程化/性能优化和前端工程的爱恨情仇.html">性能优化和前端工程的爱恨情仇</a></li><li><a href="../../html/前端工程化/webpack入门及实践.html">webpack入门及实践</a></li><li><a href="../../html/前端工程化/前端工程化不完全装逼指南.html">前端工程化不完全装逼指南</a></li></ul></li><li><a href="#"><span></span>性能优化</a><ul><li><a href="../../html/性能优化/jshint代码质量检测.html">jshint代码质量检测</a></li><li><a href="../../html/性能优化/jshint配置说明.html">jshint配置说明</a></li><li><a href="../../html/性能优化/NC性能优化.html">NC性能优化</a></li><li><a href="../../html/性能优化/React编码规范.html">React编码规范</a></li><li><a href="../../html/性能优化/性能优化待办事项.html">性能优化待办事项</a></li><li><a href="../../html/性能优化/性能优化点总结.html">性能优化点总结</a></li></ul></li><li><a href="#"><span></span>技术分享</a><ul><li class="active"><a href="../../html/技术分享/React技术分享.html">React技术分享</a></li><li><a href="../../html/技术分享/学习Git.html">学习Git</a></li><li><a href="../../html/技术分享/面向对象.html">面向对象</a></li><li><a href="../../html/技术分享/Node.js知识详解.html">Node.js知识详解</a></li><li><a href="../../html/技术分享/2015年大前端技术年终总结.html">2015年大前端技术年终总结</a></li></ul></li><li><a href="#"><span></span>随想笔记</a><ul><li><a href="../../html/随想笔记/项目技术栈规划.html">项目技术栈规划</a></li><li><a href="../../html/随想笔记/笔试面试大纲.html">笔试面试大纲</a></li></ul></li><li><a href="../../html/CONTACT.html">CONTACT</a></li></ul>    
        </div>
        
        
        <div class="forkgithub"><a target="_blank" href="https://github.com/sujunming">fork on github</a></div>
        

        <section class="idoc_nav_btn">
            <label for="idoc_nav"><span></span></label>
        </section>
    </div>
    
</div>




<div class="container">

    <div class="page-toc">
        <ul><li><a href="#t0React技术分享">React技术分享</a></li><li><a href="#t1Chapter  1 --  入门篇">Chapter  1 --  入门篇</a><ul><li><a href="#t21. 基本认识">1. 基本认识</a></li><li><a href="#t32. 为什么用React">2. 为什么用React</a></li><li><a href="#t43. 推荐关注">3. 推荐关注</a></li></ul></li><li><a href="#t5Chapter  2 --  基础篇">Chapter  2 --  基础篇</a><ul><li><a href="#t61. 获取React">1. 获取React</a></li><li><a href="#t72. 版本更新及接口说明">2. 版本更新及接口说明</a><ul><li><a href="#t8提供的文件不一样">提供的文件不一样</a></li><li><a href="#t9原来的react.js被一分为三">原来的react.js被一分为三</a></li><li><a href="#t10React.addons被拆分出若干个独立的包">React.addons被拆分出若干个独立的包</a></li><li><a href="#t11编译器优化">编译器优化</a></li></ul></li><li><a href="#t123. 代码初体验">3. 代码初体验</a></li><li><a href="#t134. JSX语法">4. JSX语法</a><ul><li><a href="#t14什么是JSX">什么是JSX</a></li><li><a href="#t15JSX的好处">JSX的好处</a></li><li><a href="#t16几个注意点">几个注意点</a></li></ul></li><li><a href="#t175. 编写组件">5. 编写组件</a></li><li><a href="#t186. 数据流">6. 数据流</a><ul><li><a href="#t19理解组件内部的数据流向">理解组件内部的数据流向</a></li><li><a href="#t20理解父组件和子组件之间的单向数据流动">理解父组件和子组件之间的单向数据流动</a></li><li><a href="#t21理解state和props">理解state和props</a></li></ul></li><li><a href="#t227. 组件的复合">7. 组件的复合</a></li></ul></li><li><a href="#t23Chapter  3 --  进阶篇">Chapter  3 --  进阶篇</a><ul><li><a href="#t241. 组件的生命周期">1. 组件的生命周期</a><ul><li><a href="#t25组件生命周期的设计">组件生命周期的设计</a></li><li><a href="#t26钩子函数">钩子函数</a></li><li><a href="#t27示例">示例</a></li></ul></li><li><a href="#t282. DOM操作">2. DOM操作</a></li><li><a href="#t293. 事件处理">3. 事件处理</a><ul><li><a href="#t30支持的事件">支持的事件</a></li><li><a href="#t31表单事件处理">表单事件处理</a></li><li><a href="#t32一个综合示例">一个综合示例</a></li></ul></li><li><a href="#t334. 理解和运用mixin">4. 理解和运用mixin</a><ul><li><a href="#t34什么是mixin">什么是mixin</a></li><li><a href="#t35示例">示例</a></li></ul></li></ul></li><li><a href="#t36Chapter  4 --  高级和应用篇">Chapter  4 --  高级和应用篇</a><ul><li><a href="#t371. 开发环境">1. 开发环境</a></li><li><a href="#t382. 架构方案">2. 架构方案</a></li></ul></li><li><a href="#t39参考资源">参考资源</a></li></ul>
    </div>
    
    <div class="content markdown-body">
        <h1 style="font-size: 40px;text-align:center;color: blue;" id="t0React&#x6280;&#x672F;&#x5206;&#x4EAB;">React&#x6280;&#x672F;&#x5206;&#x4EAB; <a href="#t0React&#x6280;&#x672F;&#x5206;&#x4EAB;"> # </a></h1>

<p><img src="../..//img/percentage.jpg" alt=""></p>
<p>&#x81EA;2013&#x5E74;5&#x6708;&#x4EFD;facebook&#x5C06;React&#x5F00;&#x6E90;&#x4EE5;&#x6765;&#xFF0C;&#x622A;&#x81F3;&#x76EE;&#x524D;&#x5DF2;&#x7ECF;&#x5728;github&#x4E0A;&#x6536;&#x83B7;&#x4E86;&#x8D85;&#x8FC7;3&#x4E07;&#x4E2A;star&#x3002;</p>
<p>&#x884D;&#x751F;&#x7684;React Native&#x9879;&#x76EE;&#xFF08;andriod&#x548C;ios&#x7248;&#x672C;&#xFF09;&#x4E5F;&#x5728;&#x4ECA;&#x5E74;9&#x6708;&#x4EFD;&#x5B8C;&#x6210;&#x53D1;&#x5E03;&#x3002;</p>
<h1 id="t1Chapter  1 --  &#x5165;&#x95E8;&#x7BC7;">Chapter  1 --  &#x5165;&#x95E8;&#x7BC7; <a href="#t1Chapter  1 --  &#x5165;&#x95E8;&#x7BC7;"> # </a></h1>
<h2 id="t21. &#x57FA;&#x672C;&#x8BA4;&#x8BC6;">1. &#x57FA;&#x672C;&#x8BA4;&#x8BC6; <a href="#t21. &#x57FA;&#x672C;&#x8BA4;&#x8BC6;"> # </a></h2>
<p>React&#x662F;&#x4E00;&#x4E2A;&#x7528;&#x4E8E;&#x6784;&#x5EFA;&#x7528;&#x6237;&#x754C;&#x9762;&#x7684;JavaScript<strong>&#x5E93;</strong>&#xFF0C;&#x800C;&#x4E0D;&#x662F;&#x4E00;&#x4E2A;MVC&#x6846;&#x67B6;&#xFF0C;&#x4F46;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;React&#x4F5C;&#x4E3A;MVC&#x67B6;&#x6784;&#x7684;View&#x5C42;&#x8F7B;&#x6613;&#x7684;&#x5728;&#x5DF2;&#x6709;&#x9879;&#x76EE;&#x4E2D;&#x4F7F;&#x7528;&#x3002;</p>
<blockquote>
<p>&#x5982;&#x679C;&#x60F3;&#x53C2;&#x4E0E;angular&#x5927;&#x6CD5;&#x597D;&#x8FD8;&#x662F;react&#x5927;&#x6CD5;&#x597D;&#x7684;&#x8BA8;&#x8BBA;&#x5927;&#x6218;&#x7684;&#x8BDD;&#xFF0C;&#x8BF7;&#x79FB;&#x6B65;<a href="http://www.zhihu.com/topic/20013159">&#x77E5;&#x4E4E;</a></p>
</blockquote>
<h2 id="t32. &#x4E3A;&#x4EC0;&#x4E48;&#x7528;React">2. &#x4E3A;&#x4EC0;&#x4E48;&#x7528;React <a href="#t32. &#x4E3A;&#x4EC0;&#x4E48;&#x7528;React"> # </a></h2>
<blockquote>
<p>&#x9AD8;&#x6548;DOM&#x6E32;&#x67D3;</p>
</blockquote>
<p>&#x4EE5;&#x524D;&#x6CA1;&#x6709;ajax&#x6280;&#x672F;&#x7684;&#x65F6;&#x5019;&#xFF0C;web&#x9875;&#x9762;&#x4ECE;&#x670D;&#x52A1;&#x7AEF;&#x6574;&#x4F53;render&#x51FA;html&#x8F93;&#x51FA;&#x5230;&#x6D4F;&#x89C8;&#x5668;&#x7AEF;&#x8FDB;&#x884C;&#x6E32;&#x67D3;&#xFF0C;&#x540C;&#x6837;&#x7684;&#xFF0C;&#x7528;&#x6237;&#x7684;&#x4E00;&#x4E2A;&#x6539;&#x53D8;&#x9875;&#x9762;&#x7684;&#x64CD;&#x4F5C;&#x4E5F;&#x4F1A;&#x5237;&#x65B0;&#x6574;&#x4E2A;&#x9875;&#x9762;&#x6765;&#x5B8C;&#x6210;&#x3002;&#x76F4;&#x5230;&#x6709;&#x4E86;ajax&#x51FA;&#x73B0;&#xFF0C;&#x5B9E;&#x73B0;&#x9875;&#x9762;&#x5C40;&#x90E8;&#x5237;&#x65B0;&#xFF0C;&#x5E26;&#x6765;&#x7684;&#x9AD8;&#x6548;&#x548C;&#x5206;&#x79BB;&#x8BA9;web&#x5F00;&#x53D1;&#x8005;&#x4EEC;&#x60CA;&#x53F9;&#x4E0D;&#x5DF2;&#x3002;&#x4F46;&#x968F;&#x4E4B;&#x800C;&#x6765;&#x7684;&#x95EE;&#x9898;&#x662F;&#xFF0C;&#x590D;&#x6742;&#x7684;&#x7528;&#x6237;&#x4EA4;&#x4E92;&#x53CA;&#x5C55;&#x73B0;&#x9700;&#x8981;&#x901A;&#x8FC7;&#x5927;&#x91CF;&#x7684;DOM&#x64CD;&#x4F5C;&#x6765;&#x5B8C;&#x6210;&#xFF0C;&#x8FD9;&#x8BA9;&#x9875;&#x9762;&#x7684;&#x6027;&#x80FD;&#x4EE5;&#x53CA;&#x5F00;&#x53D1;&#x7684;&#x6548;&#x7387;&#x53C8;&#x51FA;&#x73B0;&#x4E86;&#x65B0;&#x7684;&#x74F6;&#x9888;&#x3002;</p>
<p>&#x65F6;&#x81F3;&#x4ECA;&#x65E5;&#xFF0C;&#x8C08;&#x5230;&#x524D;&#x7AEF;&#x6027;&#x80FD;&#x4F18;&#x5316;&#xFF0C;&#x51CF;&#x5C11;DOM&#x5143;&#x7D20;&#x3001;&#x51CF;&#x5C11;reflow&#x548C;repaint&#x3001;&#x7F16;&#x7801;&#x8FC7;&#x7A0B;&#x4E2D;&#x5C3D;&#x91CF;&#x51CF;&#x5C11;DOM&#x7684;&#x67E5;&#x8BE2;&#x7B49;&#x624B;&#x6BB5;&#x662F;&#x5927;&#x5BB6;&#x8033;&#x719F;&#x80FD;&#x8BE6;&#x7684;&#x3002;&#x800C;&#x9875;&#x9762;&#x4EFB;&#x4F55;UI&#x7684;&#x53D8;&#x5316;&#x90FD;&#x662F;&#x901A;&#x8FC7;&#x6574;&#x4F53;&#x5237;&#x65B0;&#x6765;&#x5B8C;&#x6210;&#x7684;&#x3002;&#x5E78;&#x8FD0;&#x7684;&#x662F;&#xFF0C;React&#x901A;&#x8FC7;&#x81EA;&#x5DF1;&#x5B9E;&#x73B0;&#x7684;DOM Diff&#x7B97;&#x6CD5;&#xFF0C;&#x8BA1;&#x7B97;&#x51FA;&#x865A;&#x62DF;&#x9875;&#x9762;&#x5F53;&#x524D;&#x7248;&#x672C;&#x548C;&#x65B0;&#x7248;&#x672C;&#x4E4B;&#x95F4;&#x7684;&#x5DEE;&#x5F02;&#xFF0C;&#x6700;&#x5C0F;&#x5316;&#x91CD;&#x7ED8;&#xFF0C;&#x907F;&#x514D;&#x4E0D;&#x5FC5;&#x8981;&#x7684;DOM&#x64CD;&#x4F5C;&#xFF0C;&#x89E3;&#x51B3;&#x4E86;&#x8FD9;&#x4E24;&#x4E2A;&#x516C;&#x8BA4;&#x7684;&#x524D;&#x7AEF;&#x6027;&#x80FD;&#x74F6;&#x9888;&#xFF0C;&#x5B9E;&#x73B0;&#x9AD8;&#x6548;DOM&#x6E32;&#x67D3;&#x3002;</p>
<ul>
<li>&#x6211;&#x4EEC;&#x77E5;&#x9053;&#xFF0C;&#x9891;&#x7E41;&#x7684;&#x64CD;&#x4F5C;DOM&#x6240;&#x5E26;&#x6765;&#x7684;&#x6027;&#x80FD;&#x6D88;&#x8017;&#x662F;&#x5F88;&#x5927;&#x7684;&#xFF0C;&#x800C;React&#x4E4B;&#x6240;&#x4EE5;&#x5FEB;&#xFF0C;&#x662F;&#x56E0;&#x4E3A;&#x5B83;&#x4E0D;&#x76F4;&#x63A5;&#x64CD;&#x4F5C;DOM&#xFF0C;&#x800C;&#x662F;&#x5F15;&#x8FDB;&#x865A;&#x62DF;DOM&#x7684;&#x5B9E;&#x73B0;&#x6765;&#x89E3;&#x51B3;&#x8FD9;&#x4E2A;&#x95EE;&#x9898;</li>
<li>&#x5BF9;&#x4E8E;&#x9875;&#x9762;&#x7684;&#x66F4;&#x65B0;&#xFF0C;React&#x901A;&#x8FC7;&#x81EA;&#x5DF1;&#x5B9E;&#x73B0;&#x7684;<a href="http://segmentfault.com/a/1190000000606216">DOM Diff&#x7B97;&#x6CD5;</a>&#x6765;&#x8FDB;&#x884C;&#x5DEE;&#x5F02;&#x5BF9;&#x6BD4;&#x3001;&#x5DEE;&#x5F02;&#x66F4;&#x65B0;&#xFF0C;&#x53CD;&#x6620;&#x5230;&#x9875;&#x9762;&#x4E0A;&#x5C31;&#x662F;&#x53EA;&#x91CD;&#x7ED8;&#x4E86;&#x66F4;&#x65B0;&#x7684;&#x90E8;&#x5206;&#xFF0C;&#x4ECE;&#x800C;&#x63D0;&#x9AD8;&#x6E32;&#x67D3;&#x6548;&#x7387;&#x3002;</li>
</ul>
<blockquote>
<p>&#x5907;&#x6CE8;&#xFF1A;&#x4EE5;&#x4E0B;&#x6027;&#x80FD;&#x9610;&#x8FF0;&#x53C2;&#x8003;&#x81EA;<a href="http://www.zhihu.com/question/31809713/answer/53544875">&#x5C24;&#x96E8;&#x6EAA;</a>&#x3002;</p>
</blockquote>
<p>&#x5BF9;&#x4E8E;React&#x7684;&#x6027;&#x80FD;&#x65B9;&#x9762;&#xFF0C;&#x60F3;&#x5570;&#x55E6;&#x51E0;&#x53E5;&#xFF1A;</p>
<ol>
<li>React &#x4ECE;&#x6765;&#x6CA1;&#x6709;&#x8BF4;&#x8FC7; &#x201C;React &#x6BD4;&#x539F;&#x751F;&#x64CD;&#x4F5C; DOM &#x5FEB;&#x201D;&#x3002;React &#x7684;&#x57FA;&#x672C;&#x601D;&#x7EF4;&#x6A21;&#x5F0F;&#x662F;&#x6BCF;&#x6B21;&#x6709;&#x53D8;&#x52A8;&#x5C31;&#x6574;&#x4E2A;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#x6574;&#x4E2A;&#x5E94;&#x7528;&#x3002;&#x5982;&#x679C;&#x6CA1;&#x6709; Virtual DOM&#xFF0C;&#x7B80;&#x5355;&#x6765;&#x60F3;&#x5C31;&#x662F;&#x76F4;&#x63A5;&#x91CD;&#x7F6E; innerHTML&#x3002;</li>
<li>&#x5728;&#x6BD4;&#x8F83;&#x6027;&#x80FD;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x8981;&#x5206;&#x6E05;&#x695A;&#x521D;&#x59CB;&#x6E32;&#x67D3;&#x3001;&#x5C0F;&#x91CF;&#x6570;&#x636E;&#x66F4;&#x65B0;&#x3001;&#x5927;&#x91CF;&#x6570;&#x636E;&#x66F4;&#x65B0;&#x8FD9;&#x4E9B;&#x4E0D;&#x540C;&#x7684;&#x573A;&#x5408;&#x3002;</li>
<li>&#x4E0D;&#x8981;&#x5929;&#x771F;&#x5730;&#x4EE5;&#x4E3A; Virtual DOM &#x5C31;&#x662F;&#x5FEB;&#xFF0C;diff &#x4E0D;&#x662F;&#x514D;&#x8D39;&#x7684;&#xFF0C;Virtual DOM &#x771F;&#x6B63;&#x7684;&#x4EF7;&#x503C;&#x4ECE;&#x6765;&#x90FD;&#x4E0D;&#x662F;&#x6027;&#x80FD;&#xFF0C;&#x800C;&#x662F;&#x5B83; 1) &#x4E3A;&#x51FD;&#x6570;&#x5F0F;&#x7684; UI &#x7F16;&#x7A0B;&#x65B9;&#x5F0F;&#x6253;&#x5F00;&#x4E86;&#x5927;&#x95E8;&#xFF1B;2) &#x53EF;&#x4EE5;&#x6E32;&#x67D3;&#x5230; DOM &#x4EE5;&#x5916;&#x7684;&#x5176;&#x4ED6;&#x573A;&#x666F;&#xFF0C;&#x5982;backend&#x3001;native&#x3002;</li>
</ol>
<blockquote>
<p>&#x7EC4;&#x4EF6;&#x5316;</p>
</blockquote>
<p>&#x5728;&#x4E1A;&#x52A1;&#x5F00;&#x53D1;&#x4E2D;&#xFF0C;&#x9047;&#x5230;&#x516C;&#x5171;&#x7684;&#x6A21;&#x677F;&#x90E8;&#x5206;&#xFF0C;&#x6211;&#x4EEC;&#x4E0D;&#x5F97;&#x4E0D;&#x5C06;&#x6A21;&#x677F;&#x548C;&#x89C4;&#x5B9A;&#x7684;&#x6570;&#x636E;&#x683C;&#x5F0F;&#x8026;&#x5408;&#x5728;&#x4E00;&#x8D77;&#x6765;&#x5B9E;&#x73B0;&#x7EC4;&#x4EF6;&#x3002;&#x800C;&#x5728;React&#x4E2D;&#xFF0C;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;JSX&#x8BED;&#x6CD5;&#x6765;&#x5C01;&#x88C5;&#x7EC4;&#x4EF6;&#xFF0C;&#x5C06;&#x7EC4;&#x4EF6;&#x7684;&#x7ED3;&#x6784;&#x3001;&#x6570;&#x636E;&#x903B;&#x8F91;&#x751A;&#x81F3;&#x6837;&#x5F0F;&#x90FD;&#x805A;&#x5408;&#x5728;&#x4E00;&#x8D77;&#xFF0C;&#x66F4;&#x52A0;&#x7B80;&#x5355;&#x3001;&#x660E;&#x4E86;&#x3001;&#x76F4;&#x89C2;&#x7684;&#x5B9A;&#x4E49;&#x7EC4;&#x4EF6;&#x3002;</p>
<p>&#x6709;&#x4E86;&#x7EC4;&#x4EF6;&#x5316;&#x7684;&#x5B9E;&#x73B0;&#xFF0C;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x5F88;&#x76F4;&#x89C2;&#x7684;&#x5C06;&#x4E00;&#x4E2A;&#x590D;&#x6742;&#x7684;&#x9875;&#x9762;&#x5206;&#x5272;&#x6210;&#x82E5;&#x5E72;&#x4E2A;&#x72EC;&#x7ACB;&#x7EC4;&#x4EF6;&#xFF0C;&#x518D;&#x5C06;&#x8FD9;&#x4E9B;&#x72EC;&#x7ACB;&#x7EC4;&#x4EF6;&#x7EC4;&#x5408;&#x5B8C;&#x6210;&#x4E00;&#x4E2A;&#x590D;&#x6742;&#x7684;&#x9875;&#x9762;&#x3002;&#x8FD9;&#x6837;&#x65E2;&#x51CF;&#x5C11;&#x4E86;&#x903B;&#x8F91;&#x590D;&#x6742;&#x5EA6;&#xFF0C;&#x53C8;&#x5B9E;&#x73B0;&#x4E86;&#x4EE3;&#x7801;&#x7684;&#x91CD;&#x7528;&#x3002;</p>
<p>React&#x8BA4;&#x4E3A;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;&#x5E94;&#x8BE5;&#x5177;&#x6709;&#x5982;&#x4E0B;&#x7684;&#x7279;&#x5F81;&#xFF1A;</p>
<ul>
<li>&#x53EF;&#x7EC4;&#x5408;&#xFF1A;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;&#x53EF;&#x4EE5;&#x548C;&#x5176;&#x4ED6;&#x7684;&#x7EC4;&#x4EF6;&#x4E00;&#x8D77;&#x4F7F;&#x7528;&#x6216;&#x8005;&#x53EF;&#x4EE5;&#x76F4;&#x63A5;&#x5D4C;&#x5957;&#x5728;&#x53E6;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;&#x5185;&#x90E8;&#xFF0C;&#x901A;&#x8FC7;&#x8FD9;&#x6837;&#x7684;&#x7EC4;&#x5408;&#x65B9;&#x5F0F;&#xFF0C;&#x4E00;&#x4E2A;&#x590D;&#x6742;&#x7684;UI&#x7EC4;&#x4EF6;&#x53EF;&#x4EE5;&#x5206;&#x62C6;&#x6210;&#x82E5;&#x5E72;&#x4E2A;&#x7B80;&#x5355;&#x7684;UI&#x7EC4;&#x4EF6;</li>
<li>&#x53EF;&#x91CD;&#x7528;&#xFF1A;&#x6BCF;&#x4E2A;&#x7EC4;&#x4EF6;&#x90FD;&#x662F;&#x5177;&#x6709;&#x72EC;&#x7ACB;&#x529F;&#x80FD;&#x7684;&#xFF0C;&#x5B83;&#x53EF;&#x4EE5;&#x88AB;&#x4F7F;&#x7528;&#x5728;&#x591A;&#x4E2A;UI&#x573A;&#x666F;</li>
<li>&#x53EF;&#x7EF4;&#x62A4;&#xFF1A;&#x6BCF;&#x4E2A;&#x5C0F;&#x7684;&#x7EC4;&#x4EF6;&#x4EC5;&#x4EC5;&#x5305;&#x542B;&#x81EA;&#x8EAB;&#x7684;&#x903B;&#x8F91;&#xFF0C;&#x66F4;&#x5BB9;&#x6613;&#x88AB;&#x7406;&#x89E3;&#x548C;&#x7EF4;&#x62A4;</li>
</ul>
<blockquote>
<p>&#x5355;&#x5411;&#x6570;&#x636E;&#x6D41;</p>
</blockquote>
<p>&#x5728;React&#x4E2D;&#xFF0C;&#x6570;&#x636E;&#x7684;&#x6D41;&#x5411;&#x662F;&#x4ECE;&#x7236;&#x8282;&#x70B9;&#x5230;&#x5B50;&#x8282;&#x70B9;&#x7684;&#x5355;&#x5411;&#x6D41;&#x52A8;&#xFF0C;&#x8FD9;&#x6837;&#x53EF;&#x4EE5;&#x4F7F;&#x7EC4;&#x4EF6;&#x7B80;&#x5355;&#x5E76;&#x4E14;&#x5BB9;&#x6613;&#x628A;&#x63E1;&#xFF0C;&#x56E0;&#x4E3A;&#x5B50;&#x8282;&#x70B9;&#x662F;&#x65E0;&#x72B6;&#x6001;&#x7684;&#xFF0C;&#x53EA;&#x9700;&#x8981;&#x4ECE;&#x7236;&#x8282;&#x70B9;&#x83B7;&#x53D6;props&#x6E32;&#x67D3;&#x5373;&#x53EF;&#x3002;&#x8FD9;&#x6837;&#x5E26;&#x6765;&#x7684;&#x6536;&#x76CA;&#x662F;&#xFF0C;&#x9876;&#x5C42;&#x7EC4;&#x4EF6;&#x7684;&#x67D0;&#x4E2A;prop&#x6539;&#x53D8;&#x4E86;&#xFF0C;React&#x5C31;&#x4F1A;&#x5411;&#x4E0B;&#x9012;&#x5F52;&#x904D;&#x5386;&#x6574;&#x68F5;&#x7EC4;&#x4EF6;&#x6811;&#xFF0C;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#x6240;&#x6709;&#x4F7F;&#x7528;&#x5230;&#x4E86;&#x8FD9;&#x4E2A;&#x5C5E;&#x6027;&#x7684;&#x7EC4;&#x4EF6;&#x3002;</p>
<p>&#x5355;&#x5411;&#x6570;&#x636E;&#x6D41;&#x5E26;&#x6765;&#x7684;&#x51E0;&#x4E2A;&#x91CD;&#x8981;&#x7684;&#x597D;&#x5904;&#x662F;&#xFF1A;</p>
<ul>
<li>&#x76F8;&#x6BD4;&#x4E4B;&#x524D;&#x7684;&#x8D44;&#x6E90;&#x91CD;&#x7EC4;&#x5B9E;&#x73B0;&#x7684;&#x7EC4;&#x4EF6;&#xFF0C;&#x5355;&#x5411;&#x6570;&#x636E;&#x6D41;&#x53EF;&#x4EE5;&#x5F88;&#x597D;&#x7684;&#x5B8C;&#x6210;&#x7EC4;&#x4EF6;&#x95F4;&#x7684;&#x6570;&#x636E;&#x901A;&#x4FE1;&#xFF0C;&#x5426;&#x5219;&#x7684;&#x8BDD;&#xFF0C;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x5199;&#x4E00;&#x4E2A;&#x4E8B;&#x4EF6;&#x673A;&#x5236;&#x6765;&#x5904;&#x7406;&#x8FD9;&#x4E2A;&#x4E8B;&#x60C5;&#x3002;</li>
<li>&#x5927;&#x5BB6;&#x53EF;&#x80FD;&#x4F1A;&#x95EE;&#xFF0C;&#x8FD9;&#x6240;&#x5021;&#x5BFC;&#x7684;&#x5355;&#x5411;&#x6D41;&#x52A8;&#xFF0C;&#x90A3;&#x76F8;&#x5BF9;MVC&#x6216;&#x662F;MVVM&#x6846;&#x67B6;&#x7684;&#x53CC;&#x5411;&#x6570;&#x636E;&#x7ED1;&#x5B9A;&#x7B80;&#x76F4;&#x662F;&#x5F31;&#x7206;&#x4E86;&#x3002;&#x90A3;&#x4E48;&#x8FD9;&#x91CC;&#x9700;&#x8981;&#x7406;&#x89E3;&#x7684;&#x662F;&#xFF0C;&#x8FD9;&#x91CC;&#x7684;&#x5355;&#x5411;&#xFF0C;&#x662F;&#x5FAA;&#x73AF;&#x6D41;&#x52A8;&#x7684;&#x5355;&#x5411;&#xFF0C;&#x6570;&#x636E;&#x662F;&#x6301;&#x7EED;&#x66F4;&#x65B0;&#x7684;&#x3002;&#x53CC;&#x5411;&#x6570;&#x636E;&#x7ED1;&#x5B9A;&#x662F;&#x4F18;&#x79C0;&#x4FBF;&#x6377;&#x7684;&#x5B9E;&#x73B0;&#xFF0C;&#x8FD9;&#x4E2A;&#x9700;&#x8981;&#x7528;&#x5B9E;&#x73B0;&#x7684;&#x6210;&#x672C;&#x548C;&#x4E1A;&#x52A1;&#x573A;&#x666F;&#x6765;&#x8003;&#x91CF;&#x4E8C;&#x8005;&#x4E86;&#x3002;</li>
<li>&#x5BF9;&#x4E8E;&#x5355;&#x5411;&#x6570;&#x636E;&#x6D41;&#x76EE;&#x524D;&#x5DF2;&#x7ECF;&#x6709;&#x5F88;&#x597D;&#x7684;&#x7C7B;&#x5E93;&#x5B9E;&#x73B0;&#x4E86;&#xFF0C;&#x5982;flux reflux redux&#x7B49;&#x3002;</li>
</ul>
<h2 id="t43. &#x63A8;&#x8350;&#x5173;&#x6CE8;">3. &#x63A8;&#x8350;&#x5173;&#x6CE8; <a href="#t43. &#x63A8;&#x8350;&#x5173;&#x6CE8;"> # </a></h2>
<ul>
<li>React&#x7684;&#x7248;&#x672C;</li>
</ul>
<p>React&#x8FD8;&#x5728;&#x6301;&#x7EED;&#x7684;&#x66F4;&#x65B0;&#x5F00;&#x53D1;&#x4E2D;&#xFF0C;&#x622A;&#x81F3;&#x76EE;&#x524D;React&#x7684;&#x6700;&#x65B0;&#x7248;&#x662F;0.14.3&#x7248;&#x672C;&#xFF0C;&#x6BCF;&#x4E00;&#x6B21;&#x7684;&#x66F4;&#x65B0;&#x610F;&#x5473;&#x7740;API&#x7684;&#x6539;&#x53D8;&#x4EA6;&#x6216;&#x662F;&#x5305;&#x7684;&#x62C6;&#x89E3;&#xFF0C;&#x5173;&#x6CE8;&#x7248;&#x672C;&#x7684;&#x66F4;&#x65B0;&#x8BA9;&#x4F60;&#x7684;&#x4EE3;&#x7801;&#x548C;&#x601D;&#x60F3;&#x90FD;&#x8DDF;&#x4E0A;&#x8282;&#x594F;&#x3002;</p>
<ul>
<li>&#x5B66;&#x4E60;&#x8D44;&#x6599;</li>
</ul>
<p>&#x76F8;&#x6BD4;&#x4E8E;&#x4E4B;&#x524D;&#x7684;&#x770B;&#x4E0D;&#x61C2;&#x7684;&#x5B98;&#x65B9;&#x6587;&#x6863;&#xFF0C;&#x73B0;&#x5728;&#x7684;&#x4E2D;&#x6587;&#x8BBA;&#x575B;&#x3001;&#x6587;&#x6863;&#x3001;&#x5B66;&#x4E60;&#x4E66;&#x7C4D;&#x6162;&#x6162;&#x5B8C;&#x5584;&#x8D77;&#x6765;&#x4E86;&#x3002;&#x53EF;&#x4EE5;&#x6709;&#x51E0;&#x4E2A;&#x9014;&#x5F84;&#x53BB;&#x83B7;&#x5F97;&#x76F8;&#x5173;&#x7684;&#x8D44;&#x6599;&#xFF1A;</p>
<ul>
<li><a href="https://github.com/facebook/react">github&#x5B98;&#x65B9;&#x4ED3;&#x5E93;</a></li>
<li><a href="http://facebook.github.io/react/">React&#x5B98;&#x7F51;</a></li>
<li><a href="http://reactjs.cn/">React&#x4E2D;&#x56FD;&#x5B98;&#x7F51;</a></li>
<li><a href="http://bbs.react-china.org/">&#x8BBA;&#x575B;</a></li>
</ul>
<ul>
<li>&#x67B6;&#x6784;&#x53CA;&#x5468;&#x8FB9;&#x751F;&#x6001;<ul>
<li>&#x67B6;&#x6784;<ul>
<li>&#x548C;&#x5176;&#x4ED6;&#x7C7B;&#x5E93;&#x6216;&#x662F;&#x6846;&#x67B6;&#x7ED3;&#x5408;&#x4F7F;&#x7528;</li>
<li>&#x6BD4;&#x5982;&#x548C;backbone&#x7ED3;&#x5408;&#xFF0C;&#x5F25;&#x8865;&#x4E86;backbone&#x7684;&#x8584;&#x5F31;&#x7684;view&#x5C42;&#xFF1B;</li>
<li>&#x548C;angular&#x7ED3;&#x5408;&#xFF0C;&#x8BA9;&#x7EC4;&#x4EF6;&#x7684;&#x6E32;&#x67D3;&#x66F4;&#x5FEB;</li>
</ul>
</li>
<li>&#x548C;flux&#x76F8;&#x5173;&#x7C7B;&#x5E93;&#x7ED3;&#x5408;<ul>
<li>flux</li>
<li>reflux</li>
<li>redux</li>
</ul>
</li>
<li>&#x751F;&#x6001;<ul>
<li>&#x4F7F;&#x7528;webpack&#x6253;&#x5305;</li>
<li>&#x548C;ES6&#x7ED3;&#x5408;&#x6765;&#x5C01;&#x88C5;&#x4F60;&#x7684;&#x7EC4;&#x4EF6;</li>
<li>&#x6D4B;&#x8BD5;&#x76F8;&#x5173;</li>
</ul>
</li>
<li>&#x6D4F;&#x89C8;&#x5668;&#x517C;&#x5BB9;&#x6027;&#x7B49;&#x95EE;&#x9898;&#x662F;&#x4F60;&#x5728;&#x4F7F;&#x7528;&#x540E;&#x4E0D;&#x5F97;&#x4E0D;&#x8003;&#x8651;&#x7684;&#x95EE;&#x9898;&#x3002;</li>
</ul>
</li>
</ul>
<h1 id="t5Chapter  2 --  &#x57FA;&#x7840;&#x7BC7;">Chapter  2 --  &#x57FA;&#x7840;&#x7BC7; <a href="#t5Chapter  2 --  &#x57FA;&#x7840;&#x7BC7;"> # </a></h1>
<blockquote>
<p>&#x7279;&#x522B;&#x63D0;&#x793A;&#xFF1A;&#x672C;&#x6587;&#x7684;&#x4EE3;&#x7801;&#x793A;&#x4F8B;&#x8BE6;&#x89C1;<a href="https://github.com/sujunming/react-demo">sujunming/react-demo</a></p>
</blockquote>
<p>&#x8D8A;&#x662F;&#x57FA;&#x7840;&#x7684;&#x4E1C;&#x897F;&#xFF0C;&#x8D8A;&#x662F;&#x91CD;&#x8981;&#xFF1B;&#x8D8A;&#x662F;&#x539F;&#x7406;&#x7684;&#x5185;&#x5BB9;&#xFF0C;&#x8D8A;&#x8981;&#x53BB;&#x7406;&#x6E05;&#x695A;&#x3002;</p>
<h2 id="t61. &#x83B7;&#x53D6;React">1. &#x83B7;&#x53D6;React <a href="#t61. &#x83B7;&#x53D6;React"> # </a></h2>
<p>&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;&#x4EE5;&#x4E0B;&#x51E0;&#x79CD;&#x65B9;&#x5F0F;&#x6765;&#x83B7;&#x53D6;React&#x8FDB;&#x884C;&#x4F7F;&#x7528;&#xFF1A;</p>
<ul>
<li>npm&#x4E0B;&#x8F7D;react&#x5305;</li>
</ul>
<pre><code>npm install react --save
</code></pre><ul>
<li>bower&#x4E0B;&#x8F7D;</li>
</ul>
<pre><code>bower install react --save
</code></pre><ul>
<li>&#x6216;&#x8005;&#x76F4;&#x63A5;&#x53BB;<a href="http://facebook.github.io/react/">&#x5B98;&#x7F51;</a>&#x4E0B;&#x8F7D;zip&#x5305;&#xFF0C;&#x5F53;&#x7136;&#xFF0C;&#x4F60;&#x8981;&#x662F;&#x7EC3;&#x4E60;&#x4E2A;demo&#x7684;&#x8BDD;&#xFF0C;&#x4F7F;&#x7528;&#x955C;&#x50CF;&#x5730;&#x5740;&#x4E5F;&#x672A;&#x5C1D;&#x4E0D;&#x53EF;&#x3002;</li>
</ul>
<h2 id="t72. &#x7248;&#x672C;&#x66F4;&#x65B0;&#x53CA;&#x63A5;&#x53E3;&#x8BF4;&#x660E;">2. &#x7248;&#x672C;&#x66F4;&#x65B0;&#x53CA;&#x63A5;&#x53E3;&#x8BF4;&#x660E; <a href="#t72. &#x7248;&#x672C;&#x66F4;&#x65B0;&#x53CA;&#x63A5;&#x53E3;&#x8BF4;&#x660E;"> # </a></h2>
<p>&#x76EE;&#x524D;&#x6700;&#x65B0;&#x7248;&#x672C;&#x662F;0.14.3&#xFF0C;&#x5E76;&#x4E14;&#x8FD8;&#x5728;&#x6301;&#x7EED;&#x7684;&#x66F4;&#x65B0;&#x4E2D;&#x3002;&#x5148;&#x6765;&#x770B;&#x4E00;&#x4E0B;&#x65B0;&#x7248;&#x672C;&#x7684;React&#x90FD;&#x6709;&#x54EA;&#x4E9B;&#x6539;&#x53D8;&#x5427;&#x3002;</p>
<h3 id="t8&#x63D0;&#x4F9B;&#x7684;&#x6587;&#x4EF6;&#x4E0D;&#x4E00;&#x6837;">&#x63D0;&#x4F9B;&#x7684;&#x6587;&#x4EF6;&#x4E0D;&#x4E00;&#x6837; <a href="#t8&#x63D0;&#x4F9B;&#x7684;&#x6587;&#x4EF6;&#x4E0D;&#x4E00;&#x6837;"> # </a></h3>
<p>0.13&#x7248;&#x672C;</p>
<pre><code>react.js
react-with-addons.js
JSXTransformer.js
</code></pre><p>0.14&#x7248;&#x672C;</p>
<pre><code>react.js
react-dom.js
react-dom-server.js
react-with-addons.js
</code></pre><h3 id="t9&#x539F;&#x6765;&#x7684;react.js&#x88AB;&#x4E00;&#x5206;&#x4E3A;&#x4E09;">&#x539F;&#x6765;&#x7684;react.js&#x88AB;&#x4E00;&#x5206;&#x4E3A;&#x4E09; <a href="#t9&#x539F;&#x6765;&#x7684;react.js&#x88AB;&#x4E00;&#x5206;&#x4E3A;&#x4E09;"> # </a></h3>
<p>&#x4E4B;&#x524D;&#x7684;react.js&#x73B0;&#x5728;&#x5DF2;&#x7ECF;&#x88AB;&#x5206;&#x62C6;&#x4E3A;<code>react.js</code> <code>react-dom.js</code> <code>react-dom-server.js</code>&#x4E09;&#x4E2A;&#x6587;&#x4EF6;&#x4E86;&#x3002;</p>
<ul>
<li><code>react.js</code> &#x662F; React &#x7684;&#x6838;&#x5FC3;&#x5E93;</li>
</ul>
<p>react&#x5305;&#x63D0;&#x4F9B;&#x4E86;&#x4E00;&#x7CFB;&#x5217;&#x7684;API&#xFF0C;&#x4EE5;&#x4E0B;&#x5217;&#x4E3E;&#x51E0;&#x4E2A;&#x5E38;&#x7528;&#x7684;&#xFF1A;</p>
<pre><code>// &#x4F7F;&#x7528;ES6&#x7684;&#x65F6;&#x5019;&#x53EF;&#x4EE5;&#x7528;&#x8FD9;&#x4E2A;API&#x6765;&#x5B9A;&#x4E49;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;
React.Component
// &#x521B;&#x5EFA;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;&#x7C7B;&#xFF0C;&#x5E76;&#x4F5C;&#x51FA;&#x5B9A;&#x4E49;
React.createClass
// &#x521B;&#x5EFA;&#x5E76;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;&#x65B0;&#x7684;&#x6307;&#x5B9A;&#x7C7B;&#x578B;&#x7684; ReactElement
React.createElement
React.cloneElement
// &#x8FD4;&#x56DE;&#x4E00;&#x4E2A;&#x751F;&#x6210;&#x6307;&#x5B9A;&#x7C7B;&#x578B; ReactElements &#x7684;&#x51FD;&#x6570;
React.createFactory
// &#x9A8C;&#x8BC1;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#x662F;&#x5426;&#x4E3A;ReactElement&#xFF0C;&#x8FD4;&#x56DE;boolean&#x503C;
React.isValidElement
React.DOM
.....
</code></pre><ul>
<li><code>react-dom.js</code>&#x63D0;&#x4F9B;&#x4E0E; DOM &#x64CD;&#x4F5C;&#x76F8;&#x5173;&#x7684;&#x63A5;&#x53E3;&#xFF0C;&#x4EE5;&#x4E0B;&#x5217;&#x4E3E;&#x51E0;&#x4E2A;&#x5E38;&#x7528;&#x7684;&#xFF1A;</li>
</ul>
<p>react&#x5305;&#x63D0;&#x4F9B;&#x4E86;&#x4E00;&#x7CFB;&#x5217;&#x4E0E;DOM&#x76F8;&#x5173;&#x7684;API</p>
<pre><code>// &#x6E32;&#x67D3;&#x4E00;&#x4E2A; ReactElement &#x5230; DOM &#x4E2D;&#xFF0C;&#x653E;&#x5728; container &#x6307;&#x5B9A;&#x7684; DOM &#x5143;&#x7D20;&#x4E0B;&#xFF0C;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;&#x5230;&#x8BE5;&#x7EC4;&#x4EF6;&#x7684;&#x5F15;&#x7528;&#x3002;
ReactDOM.render
// &#x4ECE; DOM &#x4E2D;&#x79FB;&#x9664;&#x5DF2;&#x7ECF;&#x6302;&#x8F7D;&#x7684; React &#x7EC4;&#x4EF6;&#xFF0C;&#x6E05;&#x9664;&#x76F8;&#x5E94;&#x7684;&#x4E8B;&#x4EF6;&#x5904;&#x7406;&#x5668;&#x548C; state
ReactDOM.unmountComponentAtNode
ReactDOM.findDOMNode
</code></pre><ul>
<li>&#x670D;&#x52A1;&#x7AEF;&#x6E32;&#x67D3;&#x7684;&#x51E0;&#x4E2A; API &#x88AB;&#x72EC;&#x7ACB;&#x51FA;&#x6765;&#xFF0C;&#x4EE5;&#x4E0B;&#x4E24;&#x4E2A;&#x662F;&#x5E38;&#x7528;&#x7684;&#xFF1A;</li>
</ul>
<pre><code>ReactDOMServer.renderToString
ReactDOMServer.renderToStaticMarkup
</code></pre><h3 id="t10React.addons&#x88AB;&#x62C6;&#x5206;&#x51FA;&#x82E5;&#x5E72;&#x4E2A;&#x72EC;&#x7ACB;&#x7684;&#x5305;">React.addons&#x88AB;&#x62C6;&#x5206;&#x51FA;&#x82E5;&#x5E72;&#x4E2A;&#x72EC;&#x7ACB;&#x7684;&#x5305; <a href="#t10React.addons&#x88AB;&#x62C6;&#x5206;&#x51FA;&#x82E5;&#x5E72;&#x4E2A;&#x72EC;&#x7ACB;&#x7684;&#x5305;"> # </a></h3>
<ul>
<li>&#x8BF4;&#x660E;&#x4E0B;&#xFF0C;&#x8FD9;&#x4E2A;&#x6587;&#x4EF6;&#x662F;&#x5B98;&#x65B9;&#x63D0;&#x4F9B;&#x7684;&#x5DF2;&#x5C01;&#x88C5;&#x7684;&#x4E00;&#x7CFB;&#x5217;&#x63D2;&#x4EF6;</li>
<li>&#x5728;0.14&#x7248;&#x672C;&#x5C06;&#x5176;&#x4E2D;&#x7684;&#x63D2;&#x4EF6;&#x5C01;&#x88C5;&#x6210;&#x82E5;&#x5E72;&#x4E2A;&#x72EC;&#x7ACB;&#x7684; package&#x63D0;&#x4F9B;&#x4F7F;&#x7528;&#xFF08;&#x81F3;&#x5C11;&#x4E94;&#x4E2A;&#xFF0C;&#x4E4B;&#x524D;&#x7248;&#x672C;&#x662F;&#x76F4;&#x63A5;&#x5728;&#x4E00;&#x4E2A;&#x6587;&#x4EF6;&#x4E2D;&#x5F15;&#x7528;&#xFF09;&#x3002;</li>
</ul>
<h3 id="t11&#x7F16;&#x8BD1;&#x5668;&#x4F18;&#x5316;">&#x7F16;&#x8BD1;&#x5668;&#x4F18;&#x5316; <a href="#t11&#x7F16;&#x8BD1;&#x5668;&#x4F18;&#x5316;"> # </a></h3>
<p><strong>react-tools &#x53CA; JSXTransformer.js &#x5DF2;&#x5F03;&#x7528;</strong></p>
<p>&#x4EE5;&#x524D;&#x662F;&#x91C7;&#x7528;JSXTransformer&#x6765;&#x89E3;&#x6790;JSX&#x8BED;&#x6CD5;&#xFF0C;<strong>&#x73B0;&#x5728;&#x662F;&#x5168;&#x9762;&#x62E5;&#x62B1;Babel&#xFF08;&#x53EF;&#x4EE5;<code>npm insttall babel -g</code>&#x5B89;&#x88C5;babel&#x8FDB;&#x884C;JSX&#x8BED;&#x6CD5;&#x89E3;&#x6790;&#x3001;&#x6216;&#x662F;&#x52A0;&#x4E0A;babel&#x63D0;&#x4F9B;&#x7684;browser.js&#x5E93;&#x8FDB;&#x884C;&#x89E3;&#x6790;&#xFF09;</strong>&#x3002;</p>
<blockquote>
<p>&#x5907;&#x6CE8;&#xFF1A;&#x5982;&#x679C;&#x6CA1;&#x63A5;&#x89E6;Babel&#x7684;&#x540C;&#x5B66;&#xFF0C;&#x8BF7;&#x79FB;&#x6B65;&#x8FD9;&#x91CC;<a href="https://babeljs.io/">babeljs.io</a>&#xFF0C;Babel&#x662F;&#x4E00;&#x6B3E;&#x5F3A;&#x5927;&#x7684;&#x8BED;&#x8A00;&#x89E3;&#x6790;&#x5668;&#xFF0C;&#x76EE;&#x524D;github&#x4E0A;&#x5DF2;&#x7ECF;&#x8D85;&#x8FC7;&#x4E00;&#x4E07;&#x4E2A;star&#x4E86;&#xFF0C;&#x57FA;&#x4E8E;babel&#x8FD8;&#x53EF;&#x4EE5;&#x81EA;&#x5B9A;&#x4E49;&#x5C01;&#x88C5;&#x81EA;&#x5DF1;&#x7684;&#x89E3;&#x6790;&#x5668;&#x63D2;&#x4EF6;&#x3002;</p>
</blockquote>
<h2 id="t123. &#x4EE3;&#x7801;&#x521D;&#x4F53;&#x9A8C;">3. &#x4EE3;&#x7801;&#x521D;&#x4F53;&#x9A8C; <a href="#t123. &#x4EE3;&#x7801;&#x521D;&#x4F53;&#x9A8C;"> # </a></h2>
<blockquote>
<p>&#x8FD0;&#x884C;&#x7684;&#x4E24;&#x79CD;&#x65B9;&#x5F0F;</p>
</blockquote>
<ul>
<li>&#x9875;&#x9762;&#x4E2D;&#x52A0;browser.js&#xFF0C;script&#x6807;&#x7B7E;&#x7684;type&#x8BBE;&#x7F6E;&#x4E3A;text/babel(0.13&#x7248;&#x672C;&#x4E3A;text/jsx)</li>
</ul>
<pre><code class="lang-html"><span class="hljs-doctype">&lt;!DOCTYPE html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">html</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">&quot;../vendors/react/react.js&quot;</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">&quot;../vendors/react/react-dom.js&quot;</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
    <span class="hljs-comment">&lt;!-- browser.js &#x7684;&#x4F5C;&#x7528;&#x662F;&#x5C06; JSX &#x8BED;&#x6CD5;&#x8F6C;&#x4E3A; JavaScript &#x8BED;&#x6CD5; --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">&quot;../vendors/babel/browser.min.js&quot;</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-title">head</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">&quot;example&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
    <span class="hljs-comment">&lt;!-- JSX &#x8BED;&#x6CD5;&#xFF0C;&#x8DDF; JavaScript &#x4E0D;&#x517C;&#x5BB9;&#x3002;&#x51E1;&#x662F;&#x4F7F;&#x7528; JSX &#x7684;&#x5730;&#x65B9;&#xFF0C;&#x90FD;&#x8981;&#x52A0;&#x4E0A; type=&quot;text/babel&quot; --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;text/babel&quot;</span>&gt;</span><span class="actionscript">
      <span class="hljs-keyword">var</span> MyComponent = React.createClass({
          render: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span></span>{
            <span class="hljs-keyword">return</span> (
              &lt;h1 className=<span class="hljs-string">&quot;header&quot;</span>&gt;&#x6211;&#x7684;&#x7B2C;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;&lt;/h1&gt;
            )
          }
      });
      ReactDOM.render(&lt;MyComponent /&gt;, document.getElementById(<span class="hljs-string">&apos;example&apos;</span>));
    </span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">html</span>&gt;</span>
</code></pre>
<ul>
<li>&#x9875;&#x9762;&#x4E2D;&#x76F4;&#x63A5;&#x8FD0;&#x884C;babel&#x89E3;&#x6790;jsx&#x7684;&#x6587;&#x4EF6;&#x3002;</li>
</ul>
<pre><code class="lang-html"><span class="hljs-doctype">&lt;!DOCTYPE html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">html</span> <span class="hljs-attribute">lang</span>=<span class="hljs-value">&quot;en&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">head</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">&quot;UTF-8&quot;</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">title</span>&gt;</span>&#x88AB;&#x89E3;&#x6790;&#x7684;JSX<span class="hljs-tag">&lt;/<span class="hljs-title">title</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">&quot;../vendors/react/react.js&quot;</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">&quot;../vendors/react/react-dom.js&quot;</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-title">head</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">body</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">&quot;example&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">&quot;../build/jsx_compile.js&quot;</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">html</span>&gt;</span>
</code></pre>
<h2 id="t134. JSX&#x8BED;&#x6CD5;">4. JSX&#x8BED;&#x6CD5; <a href="#t134. JSX&#x8BED;&#x6CD5;"> # </a></h2>
<h3 id="t14&#x4EC0;&#x4E48;&#x662F;JSX">&#x4EC0;&#x4E48;&#x662F;JSX <a href="#t14&#x4EC0;&#x4E48;&#x662F;JSX"> # </a></h3>
<blockquote>
<p>&#x4E00;&#x79CD;&#x53EF;&#x4EE5;&#x5728;React&#x7EC4;&#x4EF6;&#x5185;&#x90E8;&#x6784;&#x5EFA;&#x6807;&#x7B7E;&#x7684;<strong>&#x7C7B;XML&#x8BED;&#x6CD5;</strong>&#x3002;</p>
</blockquote>
<p>&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x53D1;&#x660E;JSX&#x8BED;&#x6CD5;&#xFF0C;&#x5982;&#x679C;&#x4E0D;&#x7528;JSX&#xFF0C;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x600E;&#x4E48;&#x6837;&#x5B9A;&#x4E49;&#x6211;&#x4EEC;&#x7684;&#x7EC4;&#x4EF6;&#xFF0C;&#x4E3E;&#x4E24;&#x4E2A;&#x6817;&#x5B50;&#xFF1A;</p>
<ul>
<li>&#x6307;&#x4EE4;&#x5C01;&#x88C5;&#xFF08;&#x4EE5;Angular&#x4E3A;&#x4F8B;&#xFF09;</li>
</ul>
<pre><code>angular.module(&apos;expanderModule&apos;, []).
  .directive(&apos;expander&apos;, function(){
    return {
      restrict: &quot;EA&quot;,
      replace: true,
      transclude: true,
      scope: {title: &quot;=expanderTitle&quot;},
      template: &apos;&lt;div&gt;&apos; +
              &apos;&lt;div class=&quot;title&quot;&gt;{{title}}&lt;/div&gt;&apos; +
              &apos;&lt;div class=&quot;body closed&quot; ng-transclude&gt;&lt;/div&gt;&apos; +
              &apos;/div&apos;,
      link: function(scope, element, attrs){
        // TODO SOMETHING
      }
    }
  })
</code></pre><ul>
<li>&#x8D44;&#x6E90;&#x91CD;&#x7EC4;&#xFF08;&#x4EE5;FIS&#x4E3A;&#x4F8B;&#xFF09;</li>
</ul>
<p><img src="../..//img/widget.png" alt=""></p>
<p>AND SO ON....</p>
<p>&#x5982;&#x679C;&#x4F7F;&#x7528;JSX&#x8BED;&#x6CD5;&#xFF0C;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x5982;&#x4F55;&#x5B9A;&#x4E49;&#x548C;&#x4F7F;&#x7528;&#x7EC4;&#x4EF6;</p>
<pre><code class="lang-JavaScript"><span class="hljs-comment">/**
 * [createClass description]
 * @param  {[type]} {               render: function( [description]
 * @return {[type]}   [description]
 */</span>
<span class="hljs-keyword">var</span> MyList = React.createClass({
  render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">return</span> (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">ul</span>&gt;</span>
        {
          this.props.list.map(function (child) {
            return <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>{child}<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
          })
        }
      <span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span>
    )</span>;
  }
});

<span class="hljs-keyword">var</span> TagList = [
  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">&quot;#&quot;</span>&gt;</span>Facebook<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>,
  <span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">&quot;#&quot;</span>&gt;</span>Google<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>
]</span>;

ReactDOM.render(
  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">MyList</span> <span class="hljs-attribute">list</span>=<span class="hljs-value">{TagList}</span> /&gt;</span>,
  document.getElementById(&apos;example&apos;)
);
</span></code></pre>
<pre><code class="lang-javascript"><span class="hljs-comment">/**
 * [MyData description]
 * @type {Array}
 */</span>
<span class="hljs-keyword">var</span> MyData = [<span class="hljs-string">&apos;React&apos;</span>, <span class="hljs-string">&apos;is&apos;</span>, <span class="hljs-string">&apos;awesome&apos;</span>],
    MyStyles = {
      color: <span class="hljs-string">&quot;#333&quot;</span>,
      fontSize: <span class="hljs-string">&quot;40px&quot;</span>,
      fontWeight: <span class="hljs-string">&quot;bold&quot;</span>
    };

ReactDOM.render(
  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{MyStyles}</span>&gt;</span>
  {
    MyData.map(function (name) {
      return <span class="hljs-tag">&lt;<span class="hljs-title">span</span>&gt;</span>{name} <span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span>
    })
  }
  <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>,
  document.getElementById(&apos;example&apos;)
);
</span></code></pre>
<h3 id="t15JSX&#x7684;&#x597D;&#x5904;">JSX&#x7684;&#x597D;&#x5904; <a href="#t15JSX&#x7684;&#x597D;&#x5904;"> # </a></h3>
<p>&#x4F7F;&#x7528;JSX&#x8BED;&#x6CD5;&#x6765;&#x5C01;&#x88C5;&#x7EC4;&#x4EF6;&#x6709;&#x4EC0;&#x4E48;&#x597D;&#x5904;&#xFF1A;</p>
<ul>
<li>&#x719F;&#x6089;&#x7684;&#x4EE3;&#x7801;</li>
<li>&#x66F4;&#x52A0;&#x8BED;&#x4E49;&#x5316;</li>
<li>&#x66F4;&#x52A0;&#x62BD;&#x8C61;&#x4E14;&#x76F4;&#x89C2;</li>
</ul>
<h3 id="t16&#x51E0;&#x4E2A;&#x6CE8;&#x610F;&#x70B9;">&#x51E0;&#x4E2A;&#x6CE8;&#x610F;&#x70B9; <a href="#t16&#x51E0;&#x4E2A;&#x6CE8;&#x610F;&#x70B9;"> # </a></h3>
<ul>
<li>render&#x7684;&#x65B9;&#x6CD5;&#x4E2D;return&#x7684;&#x9876;&#x7EA7;&#x5143;&#x7D20;&#x53EA;&#x80FD;&#x662F;&#x4E00;&#x4E2A;</li>
<li>&#x5982;&#x679C;&#x8981;&#x5B9A;&#x4E49;&#x6837;&#x5F0F;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x4E0D;&#x80FD;&#x8FD9;&#x6837;&#x53BB;&#x5199;<pre><code>// &#x4E0D;&#x8981;&#x51FA;&#x73B0;&#x7C7B;&#x4F3C;&#x7684;&#x9519;&#x8BEF;&#xFF0C;style=&quot;opacity:{this.state.opacity};&quot;
</code></pre></li>
<li>&#x4F7F;&#x7528; className &#x548C; htmlFor &#x6765;&#x66FF;&#x4EE3;&#x5BF9;&#x5E94;&#x7684;class &#x548C; for</li>
</ul>
<blockquote>
<p>&#x63D0;&#x793A;&#xFF1A;&#x5173;&#x4E8E;&#x7EC4;&#x4EF6;&#x5316;&#x7684;&#x8BDD;&#x9898;&#xFF0C;&#x611F;&#x5174;&#x8DA3;&#x7684;&#x540C;&#x5B66;&#x53EF;&#x4EE5;&#x7EE7;&#x7EED;&#x5173;&#x6CE8;Vuejs&#x3001;Web components&#x7B49;&#x5BF9;&#x7EC4;&#x4EF6;&#x7684;&#x5199;&#x6CD5;&#x3002;<strong>&#x968F;&#x7740;&#x66F4;&#x4E3A;&#x590D;&#x6742;&#x7684;&#x591A;&#x7AEF;&#x73AF;&#x5883;&#x7684;&#x51FA;&#x73B0;&#xFF0C;&#x7EC4;&#x4EF6;&#x6807;&#x51C6;&#x5316;&#x8FD8;&#x6709;&#x7740;&#x66F4;&#x5927;&#x7684;&#x60F3;&#x8C61;&#x7A7A;&#x95F4;&#xFF0C;React&#x7684;&#x7EC4;&#x4EF6;&#x5B9A;&#x4E49;&#x4E0D;&#x662F;&#x7EC8;&#x70B9;&#xFF0C;&#x4E5F;&#x4E0D;&#x4E00;&#x5B9A;&#x662F;&#x6807;&#x51C6;&#xFF0C;&#x4F46;&#x4F1A;&#x5728;&#x7EC4;&#x4EF6;&#x5316;&#x7684;&#x9053;&#x8DEF;&#x4E0A;&#x7559;&#x4E0B;&#x6DF1;&#x523B;de&#x5F71;&#x54CD;&#x3002;</strong></p>
</blockquote>
<h2 id="t175. &#x7F16;&#x5199;&#x7EC4;&#x4EF6;">5. &#x7F16;&#x5199;&#x7EC4;&#x4EF6; <a href="#t175. &#x7F16;&#x5199;&#x7EC4;&#x4EF6;"> # </a></h2>
<p>&#x770B;&#x4EE5;&#x4E0B;&#x793A;&#x4F8B;&#x4E86;&#x89E3;&#x5982;&#x4F55;&#x5B9A;&#x4E49;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;</p>
<pre><code>// &#x5B9A;&#x4E49;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;LikeButton
var LikeButton = React.createClass({
  // &#x7ED9;state&#x5B9A;&#x4E49;&#x521D;&#x59CB;&#x503C;
  getInitialState: function() {
    return {liked: true};
  },
  // click&#x4E8B;&#x4EF6;&#x7684;&#x5904;&#x7406;&#x51FD;&#x6570;
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? &apos;&#x7A00;&#x7F55;&apos; : &apos;&#x8BA8;&#x538C;&apos;;
    return (
      &lt;p onClick={this.handleClick}&gt;
        &#x6211;{text}&#x4F60;.
      &lt;/p&gt;
    );
  }
});

ReactDOM.render(
  &lt;LikeButton /&gt;,
  document.getElementById(&apos;example&apos;)
);
</code></pre><p>&#x6216;&#x8005;&#x7528;ES6&#x5B9A;&#x4E49;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;</p>
<pre><code>// &#x4F7F;&#x7528;React.Component&#x6765;&#x5B9A;&#x4E49;&#x7EC4;&#x4EF6;
class Button extends React.Component {
  static displayName = &apos;Button&apos;

  static propTypes = {
    children: React.PropTypes.any,
    className: React.PropTypes.string,
    disabled: React.PropTypes.bool,
    onClick: React.PropTypes.func,
    once: React.PropTypes.bool,
    status: React.PropTypes.string,
    style: React.PropTypes.object,
    type: React.PropTypes.oneOf([&apos;submit&apos;, &apos;button&apos;])
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.disabled !== this.props.disabled) {
      this.setState({ disabled: nextProps.disabled })
    }
  }

  state = {
    disabled: this.props.disabled,
    show: null
  }

  disable(elem) {
    this.setState({ disabled: true, show: elem })
  }

  enable(elem) {
    this.setState({ disabled: false, show: elem })
  }

  handleClick() {
    if (this.props.onClick) {
      this.props.onClick()
    }
    if (this.props.once) {
      this.disable()
    }
  }

  render() {
    let status = this.props.status
    if (status) {
      status = `rct-button-${status}`
    }

    const className = classnames(
      this.props.className,
      this.getGrid(),
      &apos;rct-button&apos;,
      status
    )

    return (
      &lt;button onClick={this.handleClick.bind(this)}
        style={this.props.style}
        disabled={this.state.disabled}
        className={className}
        type={this.props.type || &quot;button&quot;}&gt;
        { this.state.show || this.props.children }
      &lt;/button&gt;
    )
  }
}

export default Button
</code></pre><h2 id="t186. &#x6570;&#x636E;&#x6D41;">6. &#x6570;&#x636E;&#x6D41; <a href="#t186. &#x6570;&#x636E;&#x6D41;"> # </a></h2>
<p><strong>&#x4E09;&#x4E2A;&#x7EF4;&#x5EA6;&#x6765;&#x770B;&#x5F85;React&#x4E2D;&#x6570;&#x636E;&#x6D41;</strong></p>
<blockquote>
<p>&#x5728;React&#x4E2D;&#x6570;&#x636E;&#x7684;&#x6D41;&#x5411;&#x662F;&#x5355;&#x5411;&#x7684;&#xFF0C;&#x5373;&#x4ECE;&#x7236;&#x8282;&#x70B9;&#x6D41;&#x5411;&#x5B50;&#x8282;&#x70B9;&#xFF0C;&#x8FD9;&#x6837;&#x5C31;&#x66F4;&#x65B9;&#x4FBF;&#x7EC4;&#x4EF6;&#x7684;&#x6E32;&#x67D3;&#xFF08;&#x5B50;&#x7EC4;&#x4EF6;&#x53EA;&#x9700;&#x8981;&#x4ECE;&#x7236;&#x7EC4;&#x4EF6;&#x83B7;&#x53D6;props&#x6E32;&#x67D3;&#x5373;&#x53EF;&#xFF09;</p>
<p>&#x7EC4;&#x4EF6;&#x5185;&#x90E8;&#x6709;&#x81EA;&#x5DF1;&#x7684;&#x72B6;&#x6001;&#xFF0C;&#x8FD9;&#x4E9B;&#x72B6;&#x6001;&#x53EA;&#x80FD;&#x7EC4;&#x4EF6;&#x5185;&#x90E8;&#x4FEE;&#x6539;&#xFF0C;&#x4FDD;&#x6301;&#x72EC;&#x7ACB;&#x6027;</p>
<p>React&#x7EC4;&#x4EF6;&#x672C;&#x8EAB;&#x5F88;&#x7B80;&#x5355;&#xFF0C;&#x53EF;&#x4EE5;&#x628A;&#x5B83;&#x770B;&#x6210;&#x5C31;&#x662F;&#x4E00;&#x4E2A;&#x51FD;&#x6570;&#xFF0C;&#x800C;&#x8FD9;&#x4E2A;&#x51FD;&#x6570;&#x6709;&#x4E24;&#x4E2A;&#x4F20;&#x53C2;&#xFF0C;props&#x548C;state&#xFF0C;&#x8C03;&#x7528;&#x8FD9;&#x4E2A;&#x51FD;&#x6570;&#x540E;&#x6094;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;&#x865A;&#x62DF;&#x7684;DOM&#x3002;</p>
</blockquote>
<h3 id="t19&#x7406;&#x89E3;&#x7EC4;&#x4EF6;&#x5185;&#x90E8;&#x7684;&#x6570;&#x636E;&#x6D41;&#x5411;">&#x7406;&#x89E3;&#x7EC4;&#x4EF6;&#x5185;&#x90E8;&#x7684;&#x6570;&#x636E;&#x6D41;&#x5411; <a href="#t19&#x7406;&#x89E3;&#x7EC4;&#x4EF6;&#x5185;&#x90E8;&#x7684;&#x6570;&#x636E;&#x6D41;&#x5411;"> # </a></h3>
<pre><code class="lang-JavaScript"><span class="hljs-comment">/**
 * [Counter]
 * @param  {Boolean}                  [description]
 * @param  {[type]}                   [description]
 * @param  {[type]}                   [description]
 * @return {[type]}                   [description]
 */</span>
<span class="hljs-keyword">var</span> Counter = React.createClass({
  <span class="hljs-comment">// &#x76F8;&#x5F53;&#x4E8E;&#x662F;&#x89C4;&#x8303;&#x5316;&#x7684;&#x63A5;&#x53E3;&#x6587;&#x6863;</span>
  propTypes: {
    name: React.PropTypes.string.isRequired,
  },
  <span class="hljs-comment">// &#x5B9A;&#x4E49;&#x521D;&#x59CB;&#x5316;&#x7684;state</span>
  getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">return</span> { clickCount: <span class="hljs-number">0</span> };
  },
  <span class="hljs-comment">// &#x5B9A;&#x4E49;&#x4E00;&#x4E2A;&#x5904;&#x7406;&#x70B9;&#x51FB;&#x7684;&#x56DE;&#x8C03;&#x65B9;&#x6CD5;</span>
  handleClick: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">this</span>.setState(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">state</span>) </span>{
      <span class="hljs-keyword">return</span> {clickCount: state.clickCount + <span class="hljs-number">1</span>};
    });
  },

  render: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">return</span> (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>{this.props.name}<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">h2</span> <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{this.handleClick}</span>&gt;</span>
        &#x70B9;&#x6211;&#x70B9;&#x6211;! <span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span>&#x88AB;&#x6233;&#x6B21;&#x6570;: {this.state.clickCount}
        <span class="hljs-tag">&lt;/<span class="hljs-title">h2</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>

    )</span>;
  }
});

ReactDOM.render(
  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Counter</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&quot;myCounter&quot;</span> /&gt;</span>,
  document.getElementById(&apos;example&apos;)
);
</span></code></pre>
<p>&#x8BF4;&#x660E;&#xFF1A;</p>
<ul>
<li>state</li>
</ul>
<p>&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x5C06;&#x7EC4;&#x4EF6;&#x770B;&#x6210;&#x662F;&#x4E00;&#x4E2A;&#x72B6;&#x6001;&#x673A;&#xFF0C;&#x6BCF;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;&#x90FD;&#x6709;&#x81EA;&#x5DF1;&#x7684;state&#xFF0C;&#x6539;&#x53D8;&#x7EC4;&#x4EF6;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;<code>setState</code>&#x6216;&#x662F;<code>replaceState</code>&#xFF0C;&#x5343;&#x4E07;&#x4E0D;&#x8981;&#x8FD9;&#x6837;&#x7C7B;&#x4F3C;&#x8FD9;&#x6837;&#x5199; <code>this.state.name = &quot;xxx&quot;</code> &#x3002;</p>
<ul>
<li>PropTypes</li>
</ul>
<p>&#x8FD9;&#x662F;&#x9A8C;&#x8BC1;props&#x7684;&#x65B9;&#x5F0F;&#xFF0C;&#x7C7B;&#x4F3C;&#x4E8E;&#x7EA6;&#x5B9A;&#x4E86;&#x4E00;&#x4E2A;&#x63A5;&#x53E3;&#x6587;&#x6863;&#x3002;</p>
<ul>
<li>props</li>
</ul>
<p>&#x901A;&#x8FC7;props&#xFF0C;&#x53EF;&#x4EE5;&#x628A;&#x4EFB;&#x610F;&#x7C7B;&#x578B;&#x7684;&#x6570;&#x636E;&#x4F20;&#x9012;&#x7ED9;&#x7EC4;&#x4EF6;&#xFF0C;&#x5F53;&#x7136;&#xFF0C;<code>&#x8FD8;&#x53EF;&#x4EE5;&#x4F7F;&#x7528; ... &#x6765;&#x540C;&#x65F6;&#x4F20;&#x9012;&#x591A;&#x4E2A;prop</code></p>
<ul>
<li>getDefaultProps&#x548C;getInitialState</li>
</ul>
<p>&#x5206;&#x522B;&#x662F;&#x5B9A;&#x4E49;&#x521D;&#x59CB;&#x5316;props&#x548C;state&#x503C;&#x7684;&#x4E24;&#x4E2A;&#x94A9;&#x5B50;&#x51FD;&#x6570;&#xFF0C;&#x4E0D;&#x4E00;&#x6837;&#x7684;&#x662F;&#xFF0C;&#x5728;&#x7EC4;&#x4EF6;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x4E2D;&#xFF0C;&#x524D;&#x8005;&#x53EA;&#x4F1A;&#x6267;&#x884C;&#x4E00;&#x6B21;&#xFF0C;&#x5177;&#x4F53;&#x4E0B;&#x4E00;&#x90E8;&#x5206;&#x7EC6;&#x8BF4;&#x3002;</p>
<h3 id="t20&#x7406;&#x89E3;&#x7236;&#x7EC4;&#x4EF6;&#x548C;&#x5B50;&#x7EC4;&#x4EF6;&#x4E4B;&#x95F4;&#x7684;&#x5355;&#x5411;&#x6570;&#x636E;&#x6D41;&#x52A8;">&#x7406;&#x89E3;&#x7236;&#x7EC4;&#x4EF6;&#x548C;&#x5B50;&#x7EC4;&#x4EF6;&#x4E4B;&#x95F4;&#x7684;&#x5355;&#x5411;&#x6570;&#x636E;&#x6D41;&#x52A8; <a href="#t20&#x7406;&#x89E3;&#x7236;&#x7EC4;&#x4EF6;&#x548C;&#x5B50;&#x7EC4;&#x4EF6;&#x4E4B;&#x95F4;&#x7684;&#x5355;&#x5411;&#x6570;&#x636E;&#x6D41;&#x52A8;"> # </a></h3>
<p>&#x7236;&#x7EC4;&#x4EF6;&#x901A;&#x8FC7;props&#x6765;&#x5411;&#x5B50;&#x7EC4;&#x4EF6;&#x4F20;&#x9012;&#x6570;&#x636E;</p>
<h3 id="t21&#x7406;&#x89E3;state&#x548C;props">&#x7406;&#x89E3;state&#x548C;props <a href="#t21&#x7406;&#x89E3;state&#x548C;props"> # </a></h3>
<p>&#x867D;&#x7136;state&#x548C;prop&#x90FD;&#x662F;&#x5B58;&#x50A8;&#x6570;&#x636E;&#x7684;&#xFF0C;&#x4F46;&#x662F;&#x8981;&#x533A;&#x5206;&#x4E8C;&#x8005;&#x7684;&#x533A;&#x522B;&#xFF1A;</p>
<ul>
<li>state&#x5B58;&#x653E;&#x7684;&#x662F;&#x6D41;&#x52A8;&#x7684;&#xFF0C;&#x53D8;&#x5316;&#x7684;&#x7EC4;&#x4EF6;&#x6570;&#x636E;&#xFF0C;&#x800C;&#x4E14;&#xFF0C;<strong>state&#x53EA;&#x5B58;&#x5728;&#x4E8E;&#x7EC4;&#x4EF6;&#x7684;&#x5185;&#x90E8;</strong></li>
<li>&#x628A;props&#x5F53;&#x6210;&#x662F;&#x7EC4;&#x4EF6;&#x7684;&#x6570;&#x636E;&#x6E90;&#xFF0C;&#x4E00;&#x822C;&#x7528;&#x6765;&#x5B58;&#x653E;&#x7EC4;&#x4EF6;&#x521D;&#x59CB;&#x540E;&#x4E0D;&#x53D8;&#x7684;&#x6570;&#x636E;&#x548C;&#x5C5E;&#x6027;</li>
</ul>
<p>&#x9700;&#x8981;&#x63D0;&#x9192;&#x7684;&#x662F;&#xFF1A;</p>
<ul>
<li>&#x4E0D;&#x8981;&#x5C06;props&#x7684;&#x6570;&#x636E;&#x590D;&#x5236;&#x5230;state&#x4E2D;&#x53BB;</li>
<li>&#x4E0D;&#x8981;&#x4F7F;&#x7528;setProps&#x6539;&#x53D8;&#x7EC4;&#x4EF6;&#x7684;&#x5C5E;&#x6027;</li>
<li>&#x8981;&#x614E;&#x7528;replaceState</li>
</ul>
<p>&#x4E8C;&#x8005;&#x7684;&#x7ED3;&#x5408;&#x5219;&#x53EF;&#x5B8C;&#x6210;&#x7EC4;&#x4EF6;&#x7684;&#x5355;&#x5411;&#x6570;&#x636E;&#x6D41;&#x52A8;</p>
<h2 id="t227. &#x7EC4;&#x4EF6;&#x7684;&#x590D;&#x5408;">7. &#x7EC4;&#x4EF6;&#x7684;&#x590D;&#x5408; <a href="#t227. &#x7EC4;&#x4EF6;&#x7684;&#x590D;&#x5408;"> # </a></h2>
<p>&#x591A;&#x4E2A;&#x7B80;&#x5355;&#x7684;&#x7EC4;&#x4EF6;&#x5D4C;&#x5957;&#xFF0C;&#x53EF;&#x6784;&#x6210;&#x4E00;&#x4E2A;&#x590D;&#x6742;&#x7684;&#x590D;&#x5408;&#x7EC4;&#x4EF6;&#xFF0C;&#x4ECE;&#x800C;&#x5B8C;&#x6210;&#x590D;&#x6742;&#x7684;&#x4EA4;&#x4E92;&#x903B;&#x8F91;&#xFF0C;&#x5B9E;&#x73B0;&#x9875;&#x9762;&#x529F;&#x80FD;&#x3002;</p>
<pre><code>
// &#x5B9A;&#x4E49;&#x4E00;&#x4E2A;&#x5934;&#x50CF;avatar&#x7684;&#x7EC4;&#x4EF6;
var Avatar = React.createClass({
  render: function() {
    return (
      &lt;div&gt;
        &lt;ProfilePic link={this.props.link} /&gt;
        &lt;ProfileLink name={this.props.name} /&gt;
      &lt;/div&gt;
    );
  }
});

// &#x5B9A;&#x4E49;&#x4E00;&#x4E2A;&#x4EBA;&#x7269;&#x56FE;&#x7247;ProfilePic&#x7EC4;&#x4EF6;
var ProfilePic = React.createClass({
  render: function() {
    return (
      &lt;img src={this.props.link} /&gt;
    );
  }
});

// &#x5B9A;&#x4E49;&#x4E00;&#x4E2A;&#x4EBA;&#x7269;&#x94FE;&#x63A5;ProfileLink&#x7EC4;&#x4EF6;
var ProfileLink = React.createClass({
  render: function() {
    return (
      &lt;a href={&apos;https://github.com/&apos; + this.props.name}&gt;
        {this.props.name}
      &lt;/a&gt;
    );
  }
});

// &#x6E32;&#x67D3;&#x5230;&#x5BB9;&#x5668;
ReactDOM.render(
  &lt;Avatar
    name=&quot;sujunming&quot;
    link=&quot;https://avatars2.githubusercontent.com/u/8686869?v=3&amp;s=460&quot;
  /&gt;,
  document.getElementById(&apos;example&apos;)
);
</code></pre><h1 id="t23Chapter  3 --  &#x8FDB;&#x9636;&#x7BC7;">Chapter  3 --  &#x8FDB;&#x9636;&#x7BC7; <a href="#t23Chapter  3 --  &#x8FDB;&#x9636;&#x7BC7;"> # </a></h1>
<h2 id="t241. &#x7EC4;&#x4EF6;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;">1. &#x7EC4;&#x4EF6;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F; <a href="#t241. &#x7EC4;&#x4EF6;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;"> # </a></h2>
<h3 id="t25&#x7EC4;&#x4EF6;&#x751F;&#x547D;&#x5468;&#x671F;&#x7684;&#x8BBE;&#x8BA1;">&#x7EC4;&#x4EF6;&#x751F;&#x547D;&#x5468;&#x671F;&#x7684;&#x8BBE;&#x8BA1; <a href="#t25&#x7EC4;&#x4EF6;&#x751F;&#x547D;&#x5468;&#x671F;&#x7684;&#x8BBE;&#x8BA1;"> # </a></h3>
<p>React&#x4E3A;&#x6BCF;&#x4E2A;&#x7EC4;&#x4EF6;&#x90FD;&#x63D0;&#x4F9B;&#x4E86;&#x7B80;&#x6D01;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;API&#xFF0C;&#x53BB;&#x54CD;&#x5E94;&#x7EC4;&#x4EF6;&#x5728;&#x4E0D;&#x540C;&#x9636;&#x6BB5;&#xFF08;&#x521B;&#x5EFA;&#x65F6;&#xFF0C;&#x5B58;&#x5728;&#x65F6;&#xFF0C;&#x9500;&#x6BC1;&#x65F6;&#xFF09;&#x6267;&#x884C;&#x76F8;&#x5E94;&#x7684;&#x64CD;&#x4F5C;&#xFF0C;&#x66F4;&#x7CBE;&#x786E;&#x7684;&#x7BA1;&#x7406;&#x6BCF;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;&#x3002;</p>
<ul>
<li>&#x7EC4;&#x4EF6;&#x5728;&#x9AD8;&#x5185;&#x805A;&#x7684;&#x540C;&#x65F6;&#xFF0C;&#x5F80;&#x5F80;&#x9700;&#x8981;&#x66B4;&#x9732;&#x4E00;&#x4E9B;&#x63A5;&#x53E3;&#x4F9B;&#x5916;&#x754C;&#x8C03;&#x7528;&#xFF0C;&#x4ECE;&#x800C;&#x80FD;&#x591F;&#x9002;&#x5E94;&#x590D;&#x6742;&#x7684;&#x9875;&#x9762;&#x9700;&#x6C42;&#xFF1B;</li>
<li>&#x66F4;&#x7CBE;&#x7EC6;&#x7684;&#x638C;&#x63A7;&#x5BF9;&#x7EC4;&#x4EF6;&#x7684;&#x7BA1;&#x7406;&#xFF0C;&#x66F4;&#x5F3A;&#x7684;&#x6027;&#x80FD;&#x7BA1;&#x7406;&#x3002;</li>
</ul>
<h3 id="t26&#x94A9;&#x5B50;&#x51FD;&#x6570;">&#x94A9;&#x5B50;&#x51FD;&#x6570; <a href="#t26&#x94A9;&#x5B50;&#x51FD;&#x6570;"> # </a></h3>
<p>&#x4EC0;&#x4E48;&#x662F;&#x94A9;&#x5B50;&#x51FD;&#x6570;&#xFF0C;&#x53EF;&#x4EE5;&#x7406;&#x89E3;&#x4E3A;&#x5728;&#x7EC4;&#x4EF6;&#x751F;&#x547D;&#x5468;&#x671F;&#x4E2D;&#x67D0;&#x4E2A;&#x786E;&#x5B9A;&#x7684;&#x65F6;&#x95F4;&#x70B9;&#x6267;&#x884C;&#x7684;&#x51FD;&#x6570;&#x3002;&#x4EE5;&#x4E0B;&#x662F;&#x5BF9;&#x94A9;&#x5B50;&#x51FD;&#x6570;&#x7684;&#x603B;&#x7ED3;&#xFF1A;</p>
<ul>
<li>&#x5B9E;&#x4F8B;&#x5316;&#xFF08;&#x6E32;&#x67D3;&#x524D;&#xFF09;<ul>
<li>getDefaultProps() <strong>&#x751F;&#x547D;&#x5468;&#x671F;&#x4E2D;&#x53EA;&#x4F1A;&#x6267;&#x884C;&#x4E00;&#x6B21;</strong></li>
<li>getInitialState()</li>
<li>componentWillmount()</li>
<li>render()</li>
</ul>
</li>
</ul>
<p>&#x8FD9;&#x610F;&#x5473;&#x7740;&#x4F60;&#x53EF;&#x4EE5;&#x5728;&#x8FD9;&#x4E2A;&#x7EC4;&#x4EF6;&#x63D2;&#x5165;&#x5230;DOM&#x4E4B;&#x524D;&#x90FD;&#x53EF;&#x4EE5;&#x8C03;&#x7528;&#x8FD9;&#x4E9B;API</p>
<ul>
<li>&#x7EC4;&#x4EF6;&#x5B58;&#x5728;&#x671F;&#xFF08;&#x6E32;&#x67D3;&#x4E3A;&#x771F;&#x5B9E;&#x7684;DOM&#xFF09;<ul>
<li>componentDidMount()</li>
<li>shouldComponentUpdate()</li>
<li>componentWillUpdate()</li>
<li>componentWillUnmount()</li>
</ul>
</li>
<li>&#x9500;&#x6BC1;&#x671F;<ul>
<li>componentDidUnmount()</li>
</ul>
</li>
</ul>
<h3 id="t27&#x793A;&#x4F8B;">&#x793A;&#x4F8B; <a href="#t27&#x793A;&#x4F8B;"> # </a></h3>
<pre><code>var MessageBox = React.createClass({
  getInitialState:function(){
    return {
        count: 0,
    }
  },
  getDefaultProps:function(){
    console.log(&apos;getDefaultProps&apos;);
  },
  componentWillMount:function(){
    console.log(&apos;componentWillMount&apos;);
  },
  componentDidMount:function(){
    console.log(&apos;componentDidMount&apos;);
  },
  componentWillUnmount: function(){
    console.log(&apos;componentWillUnmount&apos;);
  },
  shouldComponentUpdate:function(nextProp,nextState){
    console.log(&apos;shouldComponentUpdate&apos;);
    if(nextState.count &gt; 10) return false;

    return true;
  },
  componentWillUpdate:function(nextProp,nextState){
    console.log(&apos;componentWillUpdate&apos;);
  },
  componentDidUpdate:function(){
    console.log(&apos;componentDidUpdate&apos;);
  },
  killMySelf: function(){
      // &#x5305;&#x62EC;&#x9876;&#x7EA7;&#x5BB9;&#x5668;&#x4E00;&#x5757;&#x5E72;&#x6389;&#xFF0C;&#x5F53;&#x7136;&#x5728;&#x5B9E;&#x9645;&#x9879;&#x76EE;&#x4E2D;&#x53EF;&#x522B;&#x5E72;&#x8FD9;&#x6837;&#x7684;&#x50BB;&#x4E8B;
      React.unmountComponentAtNode(  document.getElementById(&apos;app&apos;) );
  },
  doUpdate:function(){
    this.setState({
        count: this.state.count + 1,
    });
  },
  render:function(){
    console.log(&apos;&#x6E32;&#x67D3;&apos;)
    return (
        &lt;div&gt;
            &lt;h1 &gt; &#x8BA1;&#x6570;&#xFF1A; {this.state.count}&lt;/h1&gt;
            &lt;button onClick={this.killMySelf}&gt;&#x5378;&#x8F7D;&#x6389;&#x8FD9;&#x4E2A;&#x7EC4;&#x4EF6;&lt;/button&gt;
            &lt;button onClick={this.doUpdate}&gt;&#x624B;&#x52A8;&#x66F4;&#x65B0;&#x4E00;&#x4E0B;&#x7EC4;&#x4EF6;&#xFF08;&#x5305;&#x62EC;&#x5B50;&#x7EC4;&#x4EF6;&#xFF09;&lt;/button&gt;
            &lt;Submessage count={this.state.count}/&gt;
        &lt;/div&gt;
    )
  }
});

var Submessage = React.createClass({
  componentWillReceiveProps:function(nextProp){
      console.log(&apos;&#x5B50;&#x7EC4;&#x4EF6;&#x5C06;&#x8981;&#x83B7;&#x5F97;prop&apos;);
  },
  shouldComponentUpdate:function(nextProp,nextState){
      if(nextProp.count&gt; 5) return false;
      return true;
  },
  render:function(){
      return (
          &lt;h3&gt;&#x5F53;&#x524D;&#x8BA1;&#x6570;&#x662F;&#xFF1A;{this.props.count}&lt;/h3&gt;
      )
  }
});

ReactDOM.render( &lt;MessageBox/&gt;, document.getElementById(&apos;app&apos;) );
</code></pre><h2 id="t282. DOM&#x64CD;&#x4F5C;">2. DOM&#x64CD;&#x4F5C; <a href="#t282. DOM&#x64CD;&#x4F5C;"> # </a></h2>
<blockquote>
<p>&#x7ED9;&#x5143;&#x7D20;&#x52A0;&#x4E0A;<code>ref=&quot;xxx&quot;</code>&#x540E;&#xFF0C;&#x53EF;&#x76F4;&#x63A5;&#x901A;&#x8FC7;<code>this.refs.xxx</code>&#x83B7;&#x53D6;&#x8BE5;DOM&#x5143;&#x7D20;&#xFF0C;&#x800C;&#x4E0D;&#x9700;&#x8981;&#x4F7F;&#x7528;<code>getDOMNode/findDOMNode</code>&#x3002;</p>
</blockquote>
<pre><code>var converter = new showdown.Converter();

var MarkdownEditor = React.createClass({
  getInitialState: function() {
    return {value: &apos;# &#x6211;&#x662F;&#x4E00;&#x7EA7;&#x5927;&#x6807;&#x9898;&apos;};
  },
  handleChange: function() {
    this.setState({value: this.refs.textarea.value});
  },
  conponentDidMount: function(){
    console.log(this.refs.textarea);
  },
  conponentWillMount: function(){
    // dangerouslySetInnerHTML&#x8FD9;&#x79CD;&#x529F;&#x80FD;&#x4E3B;&#x8981;&#x7528;&#x6765;&#x4E0E; DOM &#x5B57;&#x7B26;&#x4E32;&#x64CD;&#x4F5C;&#x7C7B;&#x5E93;&#x4E00;&#x8D77;&#x4F7F;&#x7528;&#xFF0C;
    // &#x6240;&#x4EE5;&#x63D0;&#x4F9B;&#x7684; HTML &#x5FC5;&#x987B;&#x8981;&#x683C;&#x5F0F;&#x6E05;&#x6670;
    // console.log(converter.makeHtml(this.state.value));
  },
  render: function() {
    return (
      &lt;div className=&quot;MarkdownEditor&quot;&gt;
        &lt;h3&gt;&#x8F93;&#x5165;&lt;/h3&gt;
        &lt;textarea
          onChange={this.handleChange}
          ref=&quot;textarea&quot;
          defaultValue={this.state.value} /&gt;
        &lt;h3&gt;&#x8F93;&#x51FA;&lt;/h3&gt;
        &lt;div
          className=&quot;content&quot;
          dangerouslySetInnerHTML={{
            __html: converter.makeHtml(this.state.value)
          }}
        /&gt;
      &lt;/div&gt;
    );
  }
});

ReactDOM.render(
  &lt;MarkdownEditor /&gt;,
  document.getElementById(&apos;example&apos;)
);
</code></pre><h2 id="t293. &#x4E8B;&#x4EF6;&#x5904;&#x7406;">3. &#x4E8B;&#x4EF6;&#x5904;&#x7406; <a href="#t293. &#x4E8B;&#x4EF6;&#x5904;&#x7406;"> # </a></h2>
<blockquote>
<p>&#x865A;&#x62DF;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;&#xFF1A; &#x4E8B;&#x4EF6;&#x5904;&#x7406;&#x5668;&#x5C06;&#x4F1A;&#x4F20;&#x5165;&#x865A;&#x62DF;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;&#x7684;&#x5B9E;&#x4F8B;&#xFF0C;&#x4E00;&#x4E2A;&#x5BF9;&#x6D4F;&#x89C8;&#x5668;&#x672C;&#x5730;&#x4E8B;&#x4EF6;&#x7684;&#x8DE8;&#x6D4F;&#x89C8;&#x5668;&#x5C01;&#x88C5;&#x3002;&#x5B83;&#x6709;&#x548C;&#x6D4F;&#x89C8;&#x5668;&#x672C;&#x5730;&#x4E8B;&#x4EF6;&#x76F8;&#x540C;&#x7684;&#x5C5E;&#x6027;&#x548C;&#x65B9;&#x6CD5;&#xFF0C;&#x5305;&#x62EC; stopPropagation() &#x548C; preventDefault()&#xFF0C;&#x4F46;&#x662F;&#x6CA1;&#x6709;&#x6D4F;&#x89C8;&#x5668;&#x517C;&#x5BB9;&#x95EE;&#x9898;&#x3002;</p>
</blockquote>
<h3 id="t30&#x652F;&#x6301;&#x7684;&#x4E8B;&#x4EF6;">&#x652F;&#x6301;&#x7684;&#x4E8B;&#x4EF6; <a href="#t30&#x652F;&#x6301;&#x7684;&#x4E8B;&#x4EF6;"> # </a></h3>
<ul>
<li>&#x526A;&#x8D34;&#x677F;&#x4E8B;&#x4EF6;<pre><code>onCopy onCut onPaste
</code></pre></li>
<li>&#x952E;&#x76D8;&#x4E8B;&#x4EF6;&#xFF1A;</li>
</ul>
<pre><code>onKeyDown onKeyPress onKeyUp
</code></pre><ul>
<li>&#x7126;&#x70B9;&#x4E8B;&#x4EF6;<pre><code>onFocus onBlur
</code></pre></li>
<li>&#x8868;&#x5355;&#x4E8B;&#x4EF6;</li>
</ul>
<pre><code>onChange onInput onSubmit
</code></pre><ul>
<li>&#x9F20;&#x6807;&#x4E8B;&#x4EF6;<pre><code>onClick onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave
onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp
</code></pre></li>
<li>&#x89E6;&#x6478;&#x4E8B;&#x4EF6;</li>
</ul>
<p>&#x4E3A;&#x4E86;&#x4F7F;&#x89E6;&#x6478;&#x4E8B;&#x4EF6;&#x751F;&#x6548;&#xFF0C;&#x5728;&#x6E32;&#x67D3;&#x6240;&#x6709;&#x7EC4;&#x4EF6;&#x4E4B;&#x524D;&#x8C03;&#x7528; React.initializeTouchEvents(true)&#x3002;</p>
<pre><code>onTouchCancel onTouchEnd onTouchMove onTouchStart
</code></pre><ul>
<li>UI &#x4E8B;&#x4EF6;<pre><code>onScroll
</code></pre></li>
<li>&#x9F20;&#x6807;&#x6EDA;&#x8F6E;&#x6EDA;&#x52A8;&#x4E8B;&#x4EF6;<pre><code>onWheel
</code></pre></li>
</ul>
<h3 id="t31&#x8868;&#x5355;&#x4E8B;&#x4EF6;&#x5904;&#x7406;">&#x8868;&#x5355;&#x4E8B;&#x4EF6;&#x5904;&#x7406; <a href="#t31&#x8868;&#x5355;&#x4E8B;&#x4EF6;&#x5904;&#x7406;"> # </a></h3>
<pre><code>// &#x8BE5;&#x8868;&#x5355;&#x7EC4;&#x4EF6;&#x91CC;&#x9762;&#x7528;&#x5230;&#x4E86;RadioButtons&#x548C;Checkboxes
var FormApp = React.createClass({
    getInitialState:function(){
        return {
            inputValue: &apos;&#x8BF7;&#x8F93;&#x5165;...&apos;,
            selectValue: &apos;A&apos;,
            radioValue:&apos;B&apos;,
            checkValues:[],
            textareaValue:&apos;&#x8BF7;&#x8F93;&#x5165;...&apos;
        }
    },
    handleSubmit:function(e){
        e.preventDefault();
        var formData = {
            input: this.refs.goodInput.getDOMNode().value,
            select: this.refs.goodSelect.getDOMNode().value,
            textarea: this.refs.goodTextarea.getDOMNode().value,
            radio: this.state.radioValue,
            check: this.state.checkValues,
        }

        console.log(&apos;the form result is:&apos;)
        console.log(formData);

        this.refs.goodRadio.saySomething();

    },
    handleRadio:function(e){
        this.setState({
            radioValue: e.target.value,
        })
    },
    handleCheck:function(e){
        var checkValues = this.state.checkValues.slice();
        var newVal = e.target.value;
        var index = checkValues.indexOf(newVal);
        if( index == -1 ){
            checkValues.push( newVal )
        }else{
            checkValues.splice(index,1);
        }

        this.setState({
            checkValues: checkValues,
        })
    },
    render: function(){
        return (
            &lt;form onSubmit={this.handleSubmit}&gt;
                &lt;input ref=&quot;goodInput&quot; type=&quot;text&quot; defaultValue={this.state.inputValue }/&gt;
                &lt;br/&gt;
                &#x9009;&#x9879;&#xFF1A;
                &lt;select defaultValue={ this.state.selectValue } ref=&quot;goodSelect&quot;&gt;
                    &lt;option value=&quot;A&quot;&gt;A&lt;/option&gt;
                    &lt;option value=&quot;B&quot;&gt;B&lt;/option&gt;
                    &lt;option value=&quot;C&quot;&gt;C&lt;/option&gt;
                    &lt;option value=&quot;D&quot;&gt;D&lt;/option&gt;
                    &lt;option value=&quot;E&quot;&gt;E&lt;/option&gt;
                &lt;/select&gt;
                &lt;br/&gt;
                &lt;p&gt;radio button!&lt;/p&gt;
                &lt;RadioButtons ref=&quot;goodRadio&quot; handleRadio={this.handleRadio} /&gt;
                &lt;br/&gt;

                &lt;Checkboxes handleCheck={this.handleCheck} /&gt;
                &lt;br/&gt;
                &lt;textarea defaultValue={this.state.textareaValue} ref=&quot;goodTextarea&quot;&gt;&lt;/textarea&gt;
                &lt;button type=&quot;submit&quot;&gt;&#x63D0;&#x4EA4;&lt;/button&gt;

            &lt;/form&gt;
        )
    }
});

// &#x5B9A;&#x4E49;&#x5355;&#x9009;&#x6846;&#x6309;&#x94AE;&#x7EC4;
var RadioButtons = React.createClass({
    saySomething:function(){
        alert(&quot;yo what&apos;s up man!&quot;);
    },
    render:function(){
        return (
            &lt;span&gt;
                A
                &lt;input onChange={this.props.handleRadio} name=&quot;goodRadio&quot; type=&quot;radio&quot; value=&quot;A&quot;/&gt;
                B
                &lt;input onChange={this.props.handleRadio} name=&quot;goodRadio&quot; type=&quot;radio&quot; defaultChecked value=&quot;B&quot;/&gt;
                C
                &lt;input onChange={this.props.handleRadio} name=&quot;goodRadio&quot; type=&quot;radio&quot; value=&quot;C&quot;/&gt;
            &lt;/span&gt;
        )
    }
});

var Checkboxes = React.createClass({
    render: function(){
        return (
            &lt;span&gt;
                A
                &lt;input onChange={this.props.handleCheck}  name=&quot;goodCheckbox&quot; type=&quot;checkbox&quot; value=&quot;A&quot;/&gt;
                B
                &lt;input onChange={this.props.handleCheck} name=&quot;goodCheckbox&quot; type=&quot;checkbox&quot; value=&quot;B&quot; /&gt;
                C
                &lt;input onChange={this.props.handleCheck} name=&quot;goodCheckbox&quot; type=&quot;checkbox&quot; value=&quot;C&quot; /&gt;
            &lt;/span&gt;
        )
    }
})


ReactDOM.render(&lt;FormApp /&gt;, document.getElementById(&apos;app&apos;));
</code></pre><h3 id="t32&#x4E00;&#x4E2A;&#x7EFC;&#x5408;&#x793A;&#x4F8B;">&#x4E00;&#x4E2A;&#x7EFC;&#x5408;&#x793A;&#x4F8B; <a href="#t32&#x4E00;&#x4E2A;&#x7EFC;&#x5408;&#x793A;&#x4F8B;"> # </a></h3>
<blockquote>
<p>&#x7ED3;&#x5408;&#x4EE5;&#x4E0A;&#x77E5;&#x8BC6;&#x70B9;&#xFF0C;&#x6765;&#x770B;&#x4E00;&#x4E2A;&#x57FA;&#x4E8E;React&#x3001;jquery&#x548C;bootstrap&#x5B8C;&#x6210;&#x7684;&#x4E00;&#x4E2A;&#x7B80;&#x5355;&#x7684;&#x7EC4;&#x4EF6;&#x3002;</p>
</blockquote>
<pre><code class="lang-javascript"><span class="hljs-comment">// &#x5B9A;&#x4E49;&#x4E00;&#x4E2A;&#x6309;&#x94AE;&#x7EC4;&#x4EF6;</span>
<span class="hljs-keyword">var</span> BootstrapButton = React.createClass({
  render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">return</span> (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">a</span> {<span class="hljs-attribute">...this.props</span>}
        <span class="hljs-attribute">href</span>=<span class="hljs-value">&quot;javascript:;&quot;</span>
        <span class="hljs-attribute">role</span>=<span class="hljs-value">&quot;button&quot;</span>
        <span class="hljs-attribute">className</span>=<span class="hljs-value">{(this.props.className</span> || &apos;&apos;) + &apos; <span class="hljs-attribute">btn</span>&apos;} /&gt;</span>
    )</span>;
  }
});
<span class="hljs-comment">// &#x5B9A;&#x4E49;&#x4E00;&#x4E2A;&#x5F39;&#x6846;&#x7EC4;&#x4EF6;</span>
<span class="hljs-keyword">var</span> BootstrapModal = React.createClass({
  <span class="hljs-comment">// &#x8282;&#x70B9;&#x63D2;&#x5165;&#x5230;&#x771F;&#x5B9E;&#x7684;DOM&#xFF0C;&#x4F7F;&#x7528;jquery</span>
  componentDidMount: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-comment">// &#x8C03;&#x7528;bootstrap&#x63D2;&#x4EF6;</span>
    $(<span class="hljs-keyword">this</span>.refs.root).modal({backdrop: <span class="hljs-string">&apos;static&apos;</span>, keyboard: <span class="hljs-literal">false</span>, show: <span class="hljs-literal">false</span>});
  },
  <span class="hljs-comment">// &#x5728;&#x7EC4;&#x4EF6;&#x9500;&#x6BC1;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x8BB0;&#x5F97;&#x628A;&#x4E4B;&#x524D;&#x7ED1;&#x5B9A;&#x7684;&#x65B9;&#x6CD5;&#x7ED9;&#x5E72;&#x6389;</span>
  componentWillUnmount: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    $(<span class="hljs-keyword">this</span>.refs.root).off(<span class="hljs-string">&apos;hidden&apos;</span>, <span class="hljs-keyword">this</span>.handleHidden);
  },
  close: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    $(<span class="hljs-keyword">this</span>.refs.root).modal(<span class="hljs-string">&apos;hide&apos;</span>);
  },
  open: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    $(<span class="hljs-keyword">this</span>.refs.root).modal(<span class="hljs-string">&apos;show&apos;</span>);
  },
  render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">var</span> confirmButton = <span class="hljs-literal">null</span>;
    <span class="hljs-keyword">var</span> cancelButton = <span class="hljs-literal">null</span>;

    <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.props.confirm) {
      confirmButton = (
        <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">BootstrapButton</span>
          <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{this.handleConfirm}</span>
          <span class="hljs-attribute">className</span>=<span class="hljs-value">&quot;btn-primary&quot;</span>&gt;</span>
          {this.props.confirm}
        <span class="hljs-tag">&lt;/<span class="hljs-title">BootstrapButton</span>&gt;</span>
      )</span>;
    }
    <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.props.cancel) {
      cancelButton = (
        <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">BootstrapButton</span> <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{this.handleCancel}</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">&quot;btn-default&quot;</span>&gt;</span>
          {this.props.cancel}
        <span class="hljs-tag">&lt;/<span class="hljs-title">BootstrapButton</span>&gt;</span>
      )</span>;
    }

    <span class="hljs-keyword">return</span> (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">&quot;modal fade&quot;</span> <span class="hljs-attribute">ref</span>=<span class="hljs-value">&quot;root&quot;</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">&quot;modal-dialog&quot;</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">&quot;modal-content&quot;</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">&quot;modal-header&quot;</span>&gt;</span>
              <span class="hljs-tag">&lt;<span class="hljs-title">button</span>
                <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;button&quot;</span>
                <span class="hljs-attribute">className</span>=<span class="hljs-value">&quot;close&quot;</span>
                <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{this.handleCancel}</span>&gt;</span>
                &amp;times;
              <span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>
              <span class="hljs-tag">&lt;<span class="hljs-title">h3</span>&gt;</span>{this.props.title}<span class="hljs-tag">&lt;/<span class="hljs-title">h3</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">&quot;modal-body&quot;</span>&gt;</span>
              {this.props.children}
            <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">&quot;modal-footer&quot;</span>&gt;</span>
              {cancelButton}
              {confirmButton}
            <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
    )</span>;
  },
  handleCancel: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.props.onCancel) {
      <span class="hljs-keyword">this</span>.props.onCancel();
    }
  },
  handleConfirm: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.props.onConfirm) {
      <span class="hljs-keyword">this</span>.props.onConfirm();
    }
  }
});

<span class="hljs-comment">// &#x8C03;&#x7528;&#x521A;&#x624D;&#x54B1;&#x4EEC;&#x5B9A;&#x4E49;&#x7684;&#x4E24;&#x4E2A;&#x7EC4;&#x4EF6;&#xFF0C;&#x5199;&#x54B1;&#x4EEC;&#x7684;&#x4E1A;&#x52A1;&#x7EC4;&#x4EF6;</span>
<span class="hljs-keyword">var</span> Example = React.createClass({
  handleCancel: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">if</span> (confirm(<span class="hljs-string">&apos;&#x4EB2;&#xFF0C;&#x786E;&#x5B9A;&#x8981;&#x53D6;&#x6D88;&#x4E48;&apos;</span>)) {
      <span class="hljs-keyword">this</span>.refs.modal.close();
    }
  },
  render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">var</span> modal = <span class="hljs-literal">null</span>;
    modal = (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">BootstrapModal</span>
        <span class="hljs-attribute">ref</span>=<span class="hljs-value">&quot;modal&quot;</span>
        <span class="hljs-attribute">confirm</span>=<span class="hljs-value">&quot;OK&quot;</span>
        <span class="hljs-attribute">cancel</span>=<span class="hljs-value">&quot;Cancel&quot;</span>
        <span class="hljs-attribute">onCancel</span>=<span class="hljs-value">{this.handleCancel}</span>
        <span class="hljs-attribute">onConfirm</span>=<span class="hljs-value">{this.closeModal}</span>
        <span class="hljs-attribute">title</span>=<span class="hljs-value">&quot;Hello, Bootstrap!&quot;</span>&gt;</span>
          &#x8FD9;&#x662F;&#x4E00;&#x4E2A;&#x7ED3;&#x5408;jQuery&#x548C;Bootstrap&#x800C;&#x5199;&#x7684;&#x7EC4;&#x4EF6;
      <span class="hljs-tag">&lt;/<span class="hljs-title">BootstrapModal</span>&gt;</span>
    )</span>;
    <span class="hljs-keyword">return</span> (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">&quot;example&quot;</span>&gt;</span>
        {modal}
        <span class="hljs-tag">&lt;<span class="hljs-title">BootstrapButton</span> <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{this.openModal}</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">&quot;btn-default&quot;</span>&gt;</span>
          Open modal
        <span class="hljs-tag">&lt;/<span class="hljs-title">BootstrapButton</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
    )</span>;
  },
  openModal: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">this</span>.refs.modal.open();
  },
  closeModal: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">this</span>.refs.modal.close();
  }
});

ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Example</span> /&gt;</span>, document.getElementById(&apos;example&apos;));
</span></code></pre>
<h2 id="t334. &#x7406;&#x89E3;&#x548C;&#x8FD0;&#x7528;mixin">4. &#x7406;&#x89E3;&#x548C;&#x8FD0;&#x7528;mixin <a href="#t334. &#x7406;&#x89E3;&#x548C;&#x8FD0;&#x7528;mixin"> # </a></h2>
<h3 id="t34&#x4EC0;&#x4E48;&#x662F;mixin">&#x4EC0;&#x4E48;&#x662F;mixin <a href="#t34&#x4EC0;&#x4E48;&#x662F;mixin"> # </a></h3>
<p>mixin&#x662F;&#x89E3;&#x51B3;&#x4EE3;&#x7801;&#x91CD;&#x590D;&#x7684;&#x5F3A;&#x5927;&#x5DE5;&#x5177;&#x4E4B;&#x4E00;&#xFF0C;&#x5B83;&#x540C;&#x65F6;&#x8FD8;&#x80FD;&#x8BA9;&#x7EC4;&#x4EF6;&#x4FDD;&#x6301;&#x4E13;&#x6CE8;&#x4E8E;&#x81EA;&#x8EAB;&#x7684;&#x4E1A;&#x52A1;&#x903B;&#x8F91;&#x3002;&#x5B9E;&#x9645;&#x8FD0;&#x7528;&#x4E2D;&#x7684;&#x7B80;&#x5355;&#x7406;&#x89E3;&#x5C31;&#x662F;&#xFF1A;&#x5979;&#x4EEC;&#x5C31;&#x662F;&#x6DF7;&#x5408;&#x8FDB;&#x7EC4;&#x5EFA;&#x7C7B;&#x7684;&#x5BF9;&#x8C61;&#x800C;&#x5DF2;&#x3002;&#xFF08;<strong>&#x8BB2;&#x4EBA;&#x8BDD;&#xFF1A;&#x8BA9;&#x4E0D;&#x540C;&#x7684;&#x7EC4;&#x4EF6;&#x5171;&#x7528;&#x540C;&#x4E00;&#x90E8;&#x5206;&#x903B;&#x8F91;&#xFF0C;&#x5B9E;&#x73B0;&#x4EE3;&#x7801;&#x91CD;&#x7528;</strong>&#xFF09;</p>
<h3 id="t35&#x793A;&#x4F8B;">&#x793A;&#x4F8B; <a href="#t35&#x793A;&#x4F8B;"> # </a></h3>
<pre><code>// &#x7EC4;&#x4EF6;&#x95F4;&#x90FD;&#x9700;&#x8981;&#x7528;&#x5230;&#x7684;&#x4E00;&#x6BB5;&#x903B;&#x8F91;
// &#x7ECF;&#x5E38;&#x5199;&#x592A;&#x9EBB;&#x70E6;&#xFF0C;&#x62BD;&#x79BB;&#x51FA;&#x6765;&#x516C;&#x7528;
var stateRecordMixin = {
    componentWillMount:function(){
        this.oldStates = [];
    },
    componentWillUpdate: function(nextProp,nextState){
        this.oldStates.push(nextState);
    },
    previousState:function(){
        var index = this.oldStates.length -1;
        return index == -1 ? {} : this.oldStates[index];
    }
}

// &#x5B9A;&#x4E49;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;MessageBox
var MessageBox = React.createClass({
  // &#x5728;&#x8FD9;&#x91CC;&#x4F7F;&#x7528;mixin
    mixins: [stateRecordMixin],
    getInitialState:function(){
        return {
            count: 0,
        }
    },
    doUpdate:function(){
        this.setState({
            count: this.state.count + 1,
        });

        alert(&apos;&#x4E0A;&#x4E00;&#x6B21;&#x7684;&#x8BA1;&#x6570;&#x662F;&#xFF1A;&apos;+this.previousState().count)
    },
    render:function(){
        console.log(&apos;&#x6E32;&#x67D3;&apos;);
        return (
            &lt;div&gt;
                &lt;h1 &gt; &#x8BA1;&#x6570;&#xFF1A; {this.state.count}&lt;/h1&gt;
                &lt;button onClick={this.doUpdate}&gt;&#x624B;&#x52A8;&#x66F4;&#x65B0;&#x4E00;&#x4E0B;&#x7EC4;&#x4EF6;&#xFF08;&#x5305;&#x62EC;&#x5B50;&#x7EC4;&#x4EF6;&#xFF09;&lt;/button&gt;
                &lt;Submessage count={this.state.count}/&gt;
            &lt;/div&gt;
        )
    }
});

var Submessage = React.createClass({
    mixins: [stateRecordMixin],
    getInitialState:function(){
        return {
            count: 0,
        }
    },
    componentWillReceiveProps:function(nextProp){
        this.setState({
            count: this.props.count *2,
        })
    },
    render:function(){
        console.log(&apos;&#x4E0A;&#x4E00;&#x6B21;&#x5B50;&#x7EC4;&#x4EF6;&#x7684;&#x8BA1;&#x6570;&#x662F;&#xFF1A;&apos;+this.previousState().count )
        return (
            &lt;h3&gt;&#x5F53;&#x524D;&#x5B50;&#x7EC4;&#x4EF6;&#x7684;&#x8BA1;&#x6570;&#x662F;&#xFF1A;{this.state.count}&lt;/h3&gt;
        )
    }
});

// &#x4F7F;&#x7528;&#x7EC4;&#x4EF6;
ReactDOM.render( &lt;MessageBox/&gt;,
    document.getElementById(&apos;app&apos;)
)
</code></pre><h1 id="t36Chapter  4 --  &#x9AD8;&#x7EA7;&#x548C;&#x5E94;&#x7528;&#x7BC7;">Chapter  4 --  &#x9AD8;&#x7EA7;&#x548C;&#x5E94;&#x7528;&#x7BC7; <a href="#t36Chapter  4 --  &#x9AD8;&#x7EA7;&#x548C;&#x5E94;&#x7528;&#x7BC7;"> # </a></h1>
<h2 id="t371. &#x5F00;&#x53D1;&#x73AF;&#x5883;">1. &#x5F00;&#x53D1;&#x73AF;&#x5883; <a href="#t371. &#x5F00;&#x53D1;&#x73AF;&#x5883;"> # </a></h2>
<ul>
<li>gulp</li>
<li>webpack</li>
<li>babel</li>
<li>browserify</li>
<li>reactify</li>
</ul>
<h2 id="t382. &#x67B6;&#x6784;&#x65B9;&#x6848;">2. &#x67B6;&#x6784;&#x65B9;&#x6848; <a href="#t382. &#x67B6;&#x6784;&#x65B9;&#x6848;"> # </a></h2>
<ul>
<li>&#x548C;backbone&#x7ED3;&#x5408;</li>
<li>&#x548C;flux/reflux/redux&#x7ED3;&#x5408;</li>
<li>&#x7ED3;&#x5408;ES6&#x8BED;&#x6CD5;</li>
<li>&#x670D;&#x52A1;&#x7AEF;&#x6E32;&#x67D3;</li>
<li>&#x8DEF;&#x7531;</li>
<li>&#x6D4B;&#x8BD5;</li>
</ul>
<h1 id="t39&#x53C2;&#x8003;&#x8D44;&#x6E90;">&#x53C2;&#x8003;&#x8D44;&#x6E90; <a href="#t39&#x53C2;&#x8003;&#x8D44;&#x6E90;"> # </a></h1>
<ul>
<li><a href="http://facebook.github.io/react">facebook.github.io</a></li>
<li><a href="http://react-china.org/">react-china</a></li>
<li><a href="http://reactjs.cn/">http://reactjs.cn/</a></li>
<li><a href="https://github.com/facebook/react">github</a></li>
<li><a href="http://www.ruanyifeng.com/blog/2015/03/react.html">ruanyifeng</a></li>
<li><a href="https://github.com/zexeo">zexeo</a></li>
</ul>

        <div class="copyright">Powered by <a href="https://github.com/jaywcjlove/idoc" target="_blank">idoc</a>. Dependence <a href="https://nodejs.org">Node.js</a> run.</div>
    </div>

</div>


</body>
</html>
